CSS Box model

This paper is based on the learning notes in Mu-net.

Box model: Border + border + fill + content

Boundary

The distance between the element and other elements can be set using the boundary (margin). The boundary can also be divided into upper, right, lower and left. The following code:

div{margin:20px 10px 15px 30px;} can also be written separately: div{   margin-top:20px;   margin-right:10px;   margin-bottom:15px;   margin-left:30px;} If the upper right bottom left edge is 10px; You can write this: div{margin:10px;} If the upper and lower bounds of the same 10px, around the same as 20px, you can write: div{margin:10px 20px;}

Summary: The difference between padding and margin,padding in the border, margin outside the border.

Border

The border of the box model is the line around the content and the filter, which you can set its thickness, style and color (border three properties).

The following code is div to set the border thickness to 2px, the style is solid, the color is red border: div{    border:2px  solid  Red;} Above is the abbreviation form of border code, can be written separately: div{    border-width:2px;    Border-style:solid;    border-color:red;}

Note:

1. Border-style (border Style) common styles are:

Dashed (dashed line) | Dotted (point line) | Solid (solid line).

2. Colors in Border-color (border color) can be set to hexadecimal colors, such as:

Border-color: #888;//Don't forget the well in front.

3, the width of the border-width (border width) can also be set to:

Thin | Medium | Thick (but not very common), most often with pixels (px).

4. CSS styles allow styles to be set only for one direction of the border:

div{border-bottom:1px solid Red;}

Fill

you can set the distance between the element content and the border, which is called " padding". Fills can also be divided into top, right, bottom, and left (clockwise). The following code:

div{padding:20px 10px 15px 30px;}

The order must not be confused. You can write the above code separately:

div{   padding-top:20px;   padding-right:10px;   padding-bottom:15px;   padding-left:30px;}

If the top, right, bottom, and left fills are 10px; you can write this.

div{padding:10px;}

If the upper and lower fills are the same as 10px, about the same as 20px, you can write:

div{padding:10px 20px;}

Content

The width (width) and height (height) defined within the CSS refer to the content range in which the padding is filled .

So the actual width of an element (width of box) = left border + Left box + Left padding + content width + right padding + right Border + right edge.

div{    width:200px;    padding:20px;    border:1px solid red;    margin:10px;    }

CSS Box model