CSS Model box

CSS Box models (box model)

All HTML elements can be thought of as boxes, and in CSS, the term "box model" is used for design and layout.

The CSS box model is essentially a box that encapsulates the surrounding HTML elements, which include: margins, borders, padding, and actual content.

The box model allows us to place elements in the space between other elements and the borders of surrounding elements.

The following picture illustrates the box model:

Description of different parts:

• margin (margin) -clears the area outside the bounding rectangle and the margin is transparent.
• Border (border) -a border around the inside margin and outside the content.
• Padding (inner margin) -clears the area around the content and the padding is transparent.
• Content-The contents of the box, displaying text and images.

which

Content is what is in a box, and padding (PADDING) is a bubble or other anti-seismic accessory that is afraid of damage to the contents of the box (BORDER), which is the box itself, and the border (margin). It is indicated that the box can not be stacked together when placed, to leave a certain gap to maintain ventilation, but also for easy removal. In web design, content often refers to text, pictures and other elements, but also can be small box (div nested), and real life in the box is different, the real life of things can not be larger than the box, or the box will be broken, and the CSS box is elastic, the inside of the box itself is larger than the maximum size, But it's not going to get damaged. Padding is only a width property, and each HTML tag can be considered a box;

Example:

Instance div {    width:300px;    border:25px solid Green;    padding:25px;    margin:25px;}

　　

CSS Model box