Introduction to CSS box model

1. The difference between margin and padding:

When we imagine a webpage as a wall, the content in the webpage can always be summarized as being composed of boxes, as shown in the figure:

Take out a box separately and you will find that it consists of four parts: margin, border, inner margin and content:

Here the red line marks the outer margin (margin), the gray mark further inwards is the border (border), the blue line marks the inner margin (padding), and the further inside is the specific content. (content), is it very similar to the photo? At this time, you can also think that the box in the box model is a block (div), which is composed of a photo frame, a photo, the distance between the photo frame and the outer wall, and the distance between the photo frame and the photo.

2. Example:

1,

div
{

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

This CSS definition describes such a box :

The distance between its outer margin and the top is 3 pixels, the distance between the outer margin and the left and right parts is 5 pixels, and the distance between the outer margin and the bottom is 6 pixels;

its border width is 6 pixels, and the border color is black;

The distance between its padding and the upper and lower borders is 4 pixels, and the distance from the left and right borders is 6 pixels;

The size of the photo is 500* 300

2. Description of the default value of the box, taking margin as an example:

margin:4px;

means that the distance between the box and the top, right, bottom, and left margins is 4 Pixels;

margin:4px 6px;

means that the distance between the box and the top and bottom margins is 4 pixels, and the distance between the right and left margins is 6 pixels;

margin:4px 5px 6px;

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

margin:4px 5px 6px 7px ;

means 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;

The above is the detailed content of Introduction to CSS box model. For more information, please follow other related articles on the PHP Chinese website!