Do Inline Elements Really Lack `margin-top` and `margin-bottom` Properties?

Padding for Inline Elements

Regarding inline element properties, a common question arises about padding and margins. According to some sources, inline elements have complete padding properties but lack margin-top and margin-bottom properties, only having margin-left and margin-right.

Where to Find Official Margin-Specific Statements

Firstly, this claim is not a definitive statement found within W3 standards. However, the box model does state that margin-top and margin-bottom "have no effect on non-replaced inline elements."

Understanding "No Effect" for Margin Properties

"No effect" in this context does not imply the absence of properties. Instead, it means these properties do not affect the position of inline elements. However, they exist for inheritance purposes.

Example: Inheritance of Margin Properties

Consider the following code:

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>

In this example, the margins on the second line are inherited from the parent span due to the .two rule. This behavior of inheriting margin values from containing elements demonstrates that margin-top and margin-bottom properties do exist, even though they do not directly affect the positioning of inline elements like text.

Padding Properties for Inline Elements

While inline elements do have complete padding properties, padding-top and padding-bottom may not affect the surrounding text as expected. This is because inline elements do not inherently have a defined height by default. As a result, setting padding-top or padding-bottom may not visually change the element's size or position relative to its surrounding text.

The above is the detailed content of Do Inline Elements Really Lack `margin-top` and `margin-bottom` Properties?. For more information, please follow other related articles on the PHP Chinese website!