CSS Design Guide for understanding the box model

Original: CSS Design Guide for understanding the box model

I. Understanding the BOX model

Each element will generate a box on the page. As a result, HTML pages are actually made up of a bunch of boxes. By default, the border of each box is not visible and the background is transparent, so we cannot directly see the structure of the box in the page. Using the "OutLine", "OutLine level Element" menu item in the Webdeveloper toolbar, you can easily display the box's border and background, allowing us to look at the composition of the page from another angle.

1.1 Element Box Properties

1. Border (Border): You can set the width, style, and color of the border.

2. Padding (padding): You can set the space between the box content area and the border, imagine that the padding is the content of the element pushed inward from the border.

3. Margin: You can set the spacing between the box and the adjacent elements, and imagine that the margin is a border that pushes out other elements.

1.2 Box Border

The border has 3 related properties: Width (border-width), Style (Border-style), Color (border-color)

1.3 Box Inner margin

The padding is the distance between the box content area and the box border, and if you do not set the value of padding, the element's text will be next to the element's margin. As shown, the setting of the padding value increases the width of the box, given the explicit setting of width.

1.4 Box Outer margin
As shown in 1.4, by default, there is also margin between elements,


The following rule is recommended as the first rule of the stylesheet:* {margion:0; Padding=0, this rule sets the default margin and padding for all elements to zero.

2. Vertical overlay Margin

As shown, DIV2 sets the upper margin, Div3 does not set the margin, but the spacing between Div1 and Div2 is the same as Div2 and Div3, which means that Div2 at this time does not work.
That is, the wider margin determines how far away the two elements will eventually be, if the margin-top of the DIV2 is set to 15, the effect, such as, can see DIV1 and Div2 spacing widened.

Note: The overlay is just the vertical margin, and the horizontal margin is not superimposed. For horizontally adjacent elements, their horizontal spacing is the sum of the adjacent margins.

Two. How large is the box

2.1-Block-level elements (block Element)
1. No width
The so-called no width, that is, does not explicitly set the width property of the element, if you do not set the width property of the block-level element, then the default value of this property is auto, the result is to extend the width of the element to the same as the parent element
Wide. Elements that do not explicitly set the Width property will always expand until the width of their parent element is filled, and adding margins will cause the element box to become smaller.

2. Set width
Adding borders, padding, and margins to a box with a width set will cause the box to expand wider. The amount of expansion equals the sum of the horizontal and inner margins.


2.2 In-line elements

1. No width
The inline element expands to a width that is sufficient to wrap its contents, and adding padding and horizontal borders causes the liline element to become wider, adding a quantity equal to the sum of the horizontal and inner margins.
2. Block-level elements with width
Adding borders, padding, and margins to a box with a width set will cause the box to expand wider. The amount of expansion equals the sum of the horizontal and inner margins.

3.2.3
CSS3 adds a Box-sizing property that lets you set the width of the box to behave as if it had a default auto state.

CSS Design Guide for understanding the box model