"Go" CSS (10) box model

In CSS, box model is called Box models (or box models), and the box model specifies the way in which the element frame handles element content, padding (padding), Border (border), and margin (margin). In the HTML document, each element has a box model, so in the Web world (especially page layouts), box model is everywhere. Here is a diagram of the box model:

Box-model 1

Description: In order from the inside Out is the element content, the inner moment (Padding-top, Padding-right, Padding-bottom, Padding-left), the border (Border-top, Border-right, Border-bottom, Border-left) and margins (Marging-top, Margin-right, Margin-bottom, Margin-left).

The padding, borders, and margins can be applied to all edges of an element or to individual edges. Also, margins can be negative, and in many cases negative margins are used.

Is W3school's box Model diagram:

Box-model 2 (W3school)

Description

1. As in the first picture, the inner part of the element box is the actual content (element), the inner margin (padding) that surrounds the content directly, the inner margin renders the element's background (background), and the edge of the padding is a border (border) , outside the border is margin (margin), the margin is transparent by default, and therefore does not obscure any subsequent elements (in fact, the margin of the element is the padding of its parent element). The background of an element is applied to an area composed of content and padding, and borders.

2. The padding, borders, and margins are optional and the default value is zero. However, many elements will have margins and padding set by the user-agent style sheet. You can override these browser styles by setting the margin and padding of the elements to zero. This can be done separately, or all elements can be set using the Universal selector (*):

/* Set the margin and inner moment of all elements to 0*/* {  margin:0;  padding:0;}

3. In CSS, width and height are the widths and heights of the content area (element). Increasing the padding, borders, and margins does not affect the size of the content area, but increases the total size of the element box. Assume that there are 10-pixel margins and 5-pixel padding on each edge of a box. If you want this element box to reach 100 pixels, you need to set the width of the content to 70 pixels, and the following is the CSS code:

#box {  width:70px;  margin:10px;  padding:5px;}

is an explanation of the above CSS code:

The following is an example of a complete CSS Box model layout.

View Code

The following is the effect of the above example:

Reference: http://www.w3school.com.cn/css/css_boxmodel.asp

"Go" CSS (10) box model