Home > Article > Web Front-end > What is a box model
What is the box model?
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.
Box model picture:
(Video tutorial recommendation: css video tutorial)
Component introduction:
Margin (margin) - Clear the area outside the border, and the margin is transparent.
Border (border) - the border around the padding and content.
Padding (Padding) - clears the area around the content and makes the padding transparent.
Content (content) - the content of the box, showing text and images.
Height and width of elements
When we specify the width and height properties of a CSS element, we just set the width and height of the content area. Full-sized elements also include padding, borders, and margins, etc.
Example:
Rendering:
Recommended tutorial:CSS basics Tutorial
The above is the detailed content of What is a box model. For more information, please follow other related articles on the PHP Chinese website!