Padding for Inline Elements

by

It is claimed in the book that an inline element has complete padding
properties but no margin-top/button properties, only margin-left/right
properties.

My first question is, where can I find this as an official statement?

You won’t, because it isn’t quite true. In the box model it says that for margin-top and margin-bottom:

These properties have no effect on non-replaced inline elements.

But “no effect” does not mean that the properties don’t exist. Specifically, they do exist for the purposes of inheritance. Consider this example:

p { border:1px solid red }
i { vertical-align:top; }
span { margin-top: 20px; margin-bottom: 20px;  }
b { display:inline-block; }
.two { margin:inherit;  }
<p><i>Hello</i> <span>World <b class="one">my good friend</b></span></p>
<p><i>Hello</i> <span>World <b class="two">my good friend</b></span></p>

We can see that the b element with class “two” inherits the margin top and bottom properties of the inline, non-replaced span element, and since that b element is inline-block, the margin-top and bottom do cause a layout difference. That would be impossible if the margin-top and bottom properties did not exist on the span.

More Related Contents:

  1. In CSS Flexbox, why are there no “justify-items” and “justify-self” properties?
  2. Is quoting the value of url() really necessary?
  3. Why are CSS named grid areas not in quotes?
  4. Invalid CSS selector causes rule to be dropped: What is the rationale?
  5. Is it valid to have paragraph elements inside of a heading tag in HTML5 (P inside H1)?
  6. Can we use any other TAG inside along with ? [duplicate]
  7. Can a CSS pixel be a fraction?
  8. What does font-size really correspond to?
  9. What is the difference between display: inline and display: inline-block?
  10. What is the difference between “screen” and “only screen” in media queries?
  11. 2 column div layout: right column with fixed width, left fluid
  12. CSS: How to say .class:last-of-type [classes, not elements!] [duplicate]
  13. IE 8: background-size fix [duplicate]
  14. How to write a CSS hack for IE 11? [duplicate]
  15. Get Two Columns with different background colours that extend to screen edge [duplicate]
  16. Can I remove the URL from my print css, so the web address doesn’t print?
  17. CSS to make an empty cell’s border appear?
  18. Style child element when hover on parent
  19. How to hide scrollbar in Firefox?
  20. How to auto adjust the height according to content in it?
  21. What is the difference between block and inline-block with width: 100%?
  22. Icon fonts not loading in IE11
  23. Center Oversized Image in Div
  24. Print Background colours in Chrome
  25. Font weight turns lighter on Mac/Safari
  26. CSS Equivalent of the “if” statement
  27. CSS3 3D Transform doesn’t work on IE11
  28. IE not rendering CSS properly when the site is located at networkdrive
  29. Creating CSS3 Circles connected by lines
  30. CSS: Constrain a table with long cell contents to page width?

Leave a Comment