Box Model, Box Model

Box Model, Box Model

CSS + DIV

Encapsulate data into a div. The page consists of a lot of Divs. these divs are stored through css layout (through css attribute layout). a div is a box.

Border :{

-- Left

-- Right

-- Top

-- Bottom

};

# Div_1 {

Border-top: 1px solid # ccc;

Border-bottom: 1px dashed # ccc;

Border-right: 1px dotted # ccc;

Border-left: 1px double # ccc;

};

Solid: solid line

Dashed: dotted line

Dotted: dot line

Double: double Line

 

Padding/padding

Attribute: padding {

-- Top

-- Bottom

-- Right

-- Left

};

Padding: 20px 20px 20px 20px;

 

Margin

Margin property {

-- Top

-- Bottom

-- Right

-- Left

};

Margin: 20px 20px 20px 20px

In div, if the value of margin is 0 or px, why should it be blank? The gap is the distance between the body and the browser border.

So you need to set the body {margin: 0px };

The browser parses the body in different ways, resulting in different width and width of the side.