Introduction to CSS Box model

The difference between margin and padding:

When we think of a Web page as a wall, the content of the page can always be summed up by a box,

By taking out a box alone, you will find four parts: margin, border, padding, and content.

is the red line identified as the margin (margin), the re-gray logo as the border (border), the Blue line is identified as the inner margin (padding), and then the content is specific, is it very similar to the photo? You can also think of a box in a box model as a block (DIV), which is made up of the distance between the photo frame, the photo and the photo frame, and the distance from the outer wall, the photo frame, and the photo.

Second, examples:

1.

Div
{

margin:3px 5px 6px;
PADDING:4PX 6px;
border-width:6px;
Border-color:black;
width:500;
heigth:300;
}

This CSS definition describes a box like this:

Its distance from the top is 3 pixels, the margin is 5 pixels from the left and right, and the margin is 6 pixels from the bottom;

Its border width is 6 pixels, the border color is black;

The distance between the inner margin and the upper and lower border is 4 pixels, and the distance from the left and right border is 6 pixels;

The size of the photo is 500*300

2, the box default value description, take margin as an example:

margin:4px;

Indicates that the distance between the box and the bottom right margin is 4 pixels;

MARGIN:4PX 6px;

Indicates that the distance between the box and the top and bottom margin is 4 pixels and the right left margin is 6 pixels;

margin:4px 5px 6px;

Indicates that the distance between the box and the top margin is 4 pixels, the distance from the right left margin is 5 pixels, and the distance from the bottom margin is 6 pixels;

margin:4px 5px 6px 7px;

Indicates that the distance between the box and the top margin is 4 pixels, the distance from the right margin is 5 pixels, the distance from the bottom margin is 6 pixels, and the distance from the left margin is 7 pixels;