Why does display: inline-block; remove an underline from a child element?

by

Text decorations are propagated from an element to certain descendants in certain cases. The spec describes all the cases in which this happens and doesn’t happen (as well as cases where the behavior is explicitly undefined). Here, the following portion is relevant:

Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.

Note that this propagation is not the same as inheritance and is a separate concept entirely; indeed, text-decoration: none and text-decoration: inherit do not affect propagation in the way you’d expect them to:

  • text-decoration: none simply means “this element has no text decorations of its own”, and
  • text-decoration: inherit means “this element has the same specified text-decoration value as its parent.”

In both situations, parent text decorations will still be propagated to the element where applicable. You can force an inline-block to have the same text decoration as its parent using inherit, but not any other decorations that the parent gains through propagation from its own ancestors.

This also means that simply having display: inline-block is enough to prevent the text decorations from being propagated. You do not need to specify text-decoration: none again — it’s already the initial value.

More Related Contents:

  1. How do I get this CSS text-decoration override to work?
  2. text-decoration not working for visited state link
  3. How to place elements like this
  4. comma after td entry html [closed]
  5. Vertically align an image inside a div with responsive height
  6. Vertically center two elements within a div [duplicate]
  7. How to keep origin in center of image in scale animation?
  8. Is there a CSS selector for the first direct child only?
  9. Remove white space above and below large text in an inline-block element
  10. Limit scope of external css to only a specific element?
  11. Drop-down menu that opens up/upward with pure css
  12. How to word wrap text in HTML?
  13. How do I *really* justify a horizontal menu in HTML+CSS?
  14. How to hide elements without having them take space on the page?
  15. How can I put an input element on the same line as its label?
  16. Is inside block correct?
  17. Can we set style to title tag in header
  18. How do I disable form fields using CSS?
  19. CSS selector for empty or whitespace
  20. Possible to style the css3 resize function?
  21. Why is my textarea higher up than its neighbor?
  22. Change Select List Option background colour on hover in html [duplicate]
  23. How do I remove the default link color of the html hyperlink ‘a’ tag?
  24. Multiple submit buttons on HTML form – designate one button as default [duplicate]
  25. How can one create an overlay in css?
  26. Select box arrow style
  27. Bootstrap 5 layout for different sizes cards – like Pinterest
  28. Table vertical header?
  29. Cross browser method to fit a child div to its parent’s width
  30. Why does .class:last-of-type not work as I expect?

Leave a Comment