After reading the introduction of CSS box model, you will not be confused

The property names often heard in web design: content, padding, border, margin, the CSS box model has all these properties. We can understand these properties by using a common thing in daily life - a box as a metaphor, so it is called the box model. The CSS box model is a thinking model used by CSS technology that is often used in web design.

Introduction

CSS (Cascading Style Sheet) can be translated as "Cascading Style Sheet" or "Cascading Style Sheet". It defines how to display HTML elements and is used to control the appearance of Web pages. By using CSS to separate the content and presentation of the page, work efficiency is greatly improved. CSS assumes that all HTML document elements generate a rectangular element box that describes the space occupied by the element in the HTML document layout, which can be figuratively regarded as a box. CSS has created a concept of "box model" around these boxes. By defining a series of box-related properties, it can greatly enrich and promote the performance and layout structure of each box and even the entire HTML document. For box elements, if there is no special setting, they always occupy an independent line by default, and their width is the width of the browser window. The elements before and after them, whether they are boxes or not, can only be arranged above or below them, that is, they are arranged cumulatively up and down. Each box in an HTML document can be seen as consisting of four parts from the inside to the outside, namely the content area (content), padding (padding), border (border) and margin (margin). CSS defines a series of related properties for the four parts. By setting these properties, the performance of the box can be enriched.

CSS Box Model

In CSS, we can regard all HTML elements as a box. We can take div as an example. In the browser inspector, we can also observe the appearance of the box model more intuitively as shown in the figure:

1. The composition of the box model:

Content area: content (the blue area in the middle of the picture)
Padding (purple area in the picture)
Border: border (gray area in the picture)
Margin: margin (yellow area)

Note the difference between the size of the box and the size of the box in the browser
Box size = padding + border + content area
The size of the box in the browser = padding + border + content area + margin
The composition of the box model = inner margin + border + content area + outer margin

2. Classification of box models:
The box model can be set by box-sizing, and the default box-sizing value is content-box;

1) content-box:
content box/w3c box;
The width and height set under this model are:

div{
	width: 100px;//Width of the content area height: 100px;//Height of the content area border: 5px solid pink;
	padding:10px;
	margin: 10px;
	}

The width of the box: width + border-left + border-right + padding-left + padding-right
Box height: height + border-top + border-bottom + padding-top + padding-bottom
At this time, the height of the box in the browser is: height + border-top + border-bottom + padding-top + padding-bottom + margin-top + margin-bottom;
The width of the box in the browser is: height + border-top + border-bottom + padding-top + padding-bottom + margin-top + margin-bottom;

2) border-box:
Border box/IE box
Set the value to border-box via box-sizing
The width and height set under this model are:

width:200px; //Width of the box height:200px; //Height of the box

Height of the content area: height - border-top - border-bottom - padding-top - padding-bottom
Height of the content area: height - border-top - border-bottom - padding-top - padding-bottom
The width of the box in the browser: width + margin-left + margin-right
The height of the box in the browser: height + margin-top + margin-bottom

3. Use of the box model
Generally, border-box is used when you need to set the box-sizing property. A feature of border-box is that the width and height set are the width and height of the box. When you change the padding or border, the box size will not change but will squeeze the size of your content area. When you need to set the position of the content area in the joint venture, you can use border-box to set it.

Summarize

This is the end of this article about the CSS box model that you should not be confused about. For more relevant CSS box model content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!