Home  >  Article  >  Web Front-end  >  What is a box model

What is a box model

王林
王林Original
2020-05-30 16:07:084306browse

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:

What is a box model

(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:

What is a box model

Rendering:

What is a box model

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn