CSS Box Model_html/css_WEB-ITnose

CSS Box Model

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

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

The box model allows us to place elements in the space between other elements and the surrounding element's border.

The following picture illustrates the Box Model:

Explanation of the different parts:

Margin - Clear the border area. Margin has no background color, it is completely transparent

Border - the padding and content around the border. The border is affected by the background color of the box

Padding - clears the area around the content. Will be affected by the background color filled in the box

Content - the content of the box, displaying text and images

Excerpted from: W3CSCHOOL

http ://www.w3cschool.cc/css/css-boxmodel.html

------------------------------ -------------------------------------------------- --------------------------------------------------

BoxModule is like an express package:

Margin: express plastic packaging

Border: express carton

Padding: snug inside the carton A layer of foam board on the inner wall

Content: your stuff