Block-level element visual formatting and element vision

Block-level element visual formatting and element vision
Directory [1] horizontal formatting [2] vertical formatting before

The visual formatting methods are different in the horizontal and vertical directions.

 

Horizontal formatting

The seven attributes of horizontal formatting are margin-left, border-left, padding-left, width, padding-right, border-right, and values of the margin-right7 attributes must be included in the element block width, this is usually the width value of the parent element of the block element (because the parent element of the block-level element is almost a block-level element)

Among the seven horizontally formatted attributes, only the margin-left, width, and margin-right attributes can be set to auto. Other attributes must be set to specific values or the default width is 0.

The auto value is used to make up for the gap between the actual value and the required sum.

[0 auto]

If the three attributes 'margin-left/width/margin-Right' are set to a non-auto value, this is called an excessively limited formatting attribute. In this way, margin-right will be reset to auto

[One auto]

If there is only one value of auto, the value represented by auto is calculated based on the formula that sums up the seven horizontal attributes equal to the parent width.

[2 auto]

If the margin-left and margin-right values are auto, the element is centered in the parent element.

If margin-left and width are auto, margin-left is reset to 0.

If margin-right and width are auto, margin-right is reset to 0.

[3 auto]

If all three values are auto, both margin-left and margin-right are reset to 0.

<Demonstration of horizontal auto>

Replacement element

The previous section describes horizontal formatting of Non-replaceable block-level elements in a normal text stream, while replacing block-level elements is simpler to manage. All rules for non-replacement block elements apply to the replacement of block elements, except that if width is auto, the width of the element is the inherent width of the content.

[Note] You must set display to block.

 

Vertical formatting

Similar to horizontal formatting, vertical formatting of block-level elements also has a series of interesting behaviors. The default height of an element is determined by its content. The height is also affected by the content width. The narrower the paragraph, the higher the content accordingly, so as to accommodate all the inline content.

As with horizontal formatting, vertical formatting also has seven attributes: margin-top/border-top/padding-top/height/padding-bottom/border-bottom/margin-bottom

The values of these seven attributes must be equal to the height of the element containing blocks.

Only three attributes, margin-top/height/margin-bottom, can be set to auto.

If the margin-top/margin-bottom of a block element in a normal stream is set to auto, it is automatically calculated as 0.

[Note] auto Processing for the top and bottom margins of positioning elements is different.

If the height of the block is not explicitly declared, the percentage height is reset to auto

In the simplest case, if the block-level normal stream element is set to height: auto, the height of the row box is exactly enough to contain its inline content.

<Demonstration of vertical auto>