Article From:


By default, how are elements laid out?

First, get the content of the element, add padding, border, margin, and put it in a box – that’s the box model we saw before.

By default, the content width of a block-level element is 100% of its parent element’s width and the height is the same as its parent element. The height and height of an element in a row correspond to the width and height of its content. You cannot set width and height of in-line elements – they are in the content area of block-level elements. If youTo set the size of an in-line element, you need to set it to a block-level element similar to that of a block-level element, which can be achieved by setting display: block (or dispaly: inline-block; inline-block mixes inline withBlock characteristics)

This explains the layout of independent elements, but how do elements interact with each other? Normal layout flow is a system for placing arrangement elements in the viewing area of browsers. By default, block-level elements are placed in the direction that blocks appear in document writing mode – each block-level element appears in the previous block-level element.In the next line, they will be separated by margins themselves. Therefore, in English, other horizontal, top-down writing patterns, block-level elements are arranged vertically.


The in-line elements behave differently – they do not start on another line; as long as their parent block-level elements are wide enough, they will appear on the same line as other in-line elements and adjacent text content. If space is insufficient, the overflowed text or in-line elements move to a new line.

If two adjacent elements have margins and the two margins overlap, the larger margins are retained and the smaller ones disappear – a phenomenon called outer margin superposition


Leave a Reply

Your email address will not be published. Required fields are marked *