The difference between content box (w3c box) and border box (IE box) in CSS

1. What is a content box (w3c box)

The default box model, use the box-sizing attribute to change the box model, the box whose value is content-box is the default box model

Features: When we specify the width attribute for a box, the width is actually only the width of the content. When the padding and border become larger, the content width remains unchanged, and the overall width occupied by the box becomes larger. Same goes for height.

.content{
    
    
            width: 100px;
            height: 100px;
            background-color: rgb(173, 69, 69);
            margin: 10px auto;
            padding: 10px 10px;

            border: 5px solid black;

        }
<div class="content">我是内容盒子</div>

You can see that the border and padding are set for the content box in the figure. The width and height of the content area are not changed, but are enlarged outwards. At this time, the actual width and height of the box need to be added with borders and inner and outer margins .

2. What is a border box (IE box)

Use the box-sizing property to change the box model, and the box whose value is border-box is the border box

Features: When we specify the width attribute for a box, the width actually includes the width of the border and padding. If the border remains unchanged, the padding will become larger, and the content will become smaller at this time.

  .border{
    
    
            width: 100px;
            height: 100px;
            background-color: rgb(124, 230, 38);
            box-sizing: border-box;
            border: 5px solid black;
            margin: 10px auto;
            padding: 10px 10px;
       }
<div class="border">我是边框盒子</div>

The content area in the border box in the figure has changed, and the inner margin and border set for it have affected the width and height of the content area. At this time, the actual width and height of the entire box is 100px plus the outer margin.

3. The difference between the two

The content box does not affect the width and height of the content area regardless of the margin, padding, and border settings, but it will affect the actual width and height of the box.

And when the border box needs to set the padding and border properties, you need to pay attention to the changes in the content area.