Intra-row elements, block-level elements, their respective features and their mutual conversion, element feature conversion

Intra-row elements, block-level elements, their respective features and their mutual conversion, element feature conversion

As a small front-end, block-level elements and intra-row elements have been used for thousands or tens of thousands of times. Apart from "Block-level exclusive row exclusive", there is very little understanding of detailed attributes, today we will test and describe some attributes.

1. Support for Physical Properties

Element category	Width	Height	Padding	Margin	Exclusive row?
In-row elements (span, a, etc)	×	×	√	√	×
Block-level elements (div, p, etc)	√	√	√	√	√
Both in-row and block-level	√	√	√	√	×

Note: The upper and lower padding (padding-top, padding-bottom) of the row element is invalid. For details, refer to the following example.

This is the effect with the upper and lower padding:

{    background-color: #eee;    padding-left: 20px;    padding-top: 20px;    padding-right: 20px;    padding-bottom: 20px;    border: 1px solid #666;}

This is the effect of removing the upper and lower padding:

{
background-color: #eee;padding-left: 20px;padding-right: 20px;border: 1px solid #666;
}

It can be seen that the position of the span element and the content of the text do not change the position of the adjacent div element, but the upper and lower padding renders the corresponding upper and lower background colors for it.

Ii. How to convert intra-row elements into block-level

① Display: block; converted to normal block level

② Display: inline-block; convert to inline block level, not just exclusive row

③ Float: left/right; converted to inline block level, not only exclusive row, but float makes the Row Element out of the Document Stream. Remember to use clear floating

Span {float: left; width: 100px; height: 100px; background-color: # eee; padding-left: 20px; padding-right: 20px; border: 1px solid #666 ;}<! -- Corresponding html code --> <span> test-span </span> <div style = "clear: both; "> </div> <div style =" width: 100px; height: 100px; background-color: lightblue; "> test-div </div> <div style =" width: 100px; height: 100px; background-color: yellow; "> test-div </div>

④ Positioning

You can use absolute or fixed to implicitly convert row elements into block-level elements, but it also leaves the original document stream.

In summary, both float and positioning can implicitly convert row elements into block-level elements.

3. Converting block-level elements into intra-row Elements

① Display: inline; convert to Line Element

② Display: inline-block; convert to inline block level, not just exclusive row