To discuss whether the internal and external margins play a role in the row, we should discuss the replacement elements in the row and the non-replacement elements in the row respectively:

To discuss whether the internal and external margins play a role in the row, we should discuss the replacement elements in the row and the non-replacement elements in the row respectively:

<Style type = "text/css">

# Two {

Width: 100px;

Margin-right: 50px;

Padding-left: 50px;

} </Style>

<Span id = "one"> 1111 </span>

& Lt; span id = "two" & gt; 2222 & lt;/span & gt;

& Lt; span id = "three" & gt; 3333 & lt;/span & gt;

4. when an inline non-replacement element applies the outer margin, the visual effect is not displayed because the outer margin is transparent and the row height is not affected. However, when coloring, the inner margin is non-transparent, therefore, the results can be displayed.

<Style type = "text/css">

# Two {

Margin-top: 50px;

Padding-bottom: 50px;

}

</Style>

<Span id = "one"> 1111 </span>

<Span id = "two"> up and down have no effect on the row height, but padding can be colored. </span> <br/>

<Span id = "three"> text stream space is not occupied except for the Row Height. </span>

 

Effect:

 

5. for an inline replacement element, the internal and external margins set for it are actually set for its replacement element, which will affect the size margin of the replacement element, thus affecting the Row Height, therefore, you can set margin and padding.