Composition of the box model

CSS box models include content, padding, border, and Margin

Box models can be divided into two types: standard box model (content box) and alternative box model (border box).

Standard and model: Content box width = content width;

Alternative box model: border box width = content width + padding + border.

Contrast the following

Content Areas, bounded by content boundaries, hold the “real” content of elements, such as text, images, or video.

Padding area, which is limited by the padding boundary, extends from the content, extends the background of the content area, and fills in the spacing between the content and the border.

The border area, which is limited by the border and extends from the inner margin, is the area containing the border.

The border is bounded by the margin, which is extended with white space to separate adjacent elements.

Margin merge

The upper and lower margins of two adjacent elements may be combined into a single margin. The combined margin is subject to the maximum value.

  • What situations merge

    Parent-child merge — that is, without separation (no border, padding, inline content, clear float, etc.)

    Sibling merge – that is, margins overlap between adjacent elements of the same level

  • How to stop a merger

    Sibling merging is as expected, but you can use display:inline-block; Eliminate (width=100%)

    Parent-child merges can: add padding/border to the parent element; Add a overflow: hidden; With the display: flex;

Note: Margin merge only happens in vertical direction, not horizontal direction!