Skip to main content

What is the difference between the box-size property content-box and border-box in the css box model?

 The box model is a very important concept in CSS layout, it includes content area, padding, border, and margin. Box models can be divided into two types: standard box models and IE box models. The box model, as the name suggests, is used to hold things, and the things it holds are the content of HTML elements. In other words, every visible HTML element is a box.

Please see the difference between the two below: border-box, content-box

<style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 10px solid yellowgreen;
            padding:10px;
            box-sizing: border-box;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: aqua;
            border: 10px solid yellowgreen;
            padding:10px;
            box-sizing: content-box;
        }
    </style>
</head>
<body>
  <div class="box1">

  </div>
  <hr>
  <div class="box2">

  </div>

After the code is executed, the result is as follows

Summary comparison:
box-sizing: content-box | border-box. The main difference between them is that the width package does not contain border and padding. The default value of box-sizing is content-box, which is the standard box model by default.

Labels:

Comments

Post a Comment

Popular posts from this blog

Destructuring assignment in ES6

 In the past, when we wanted to assign a value to a variable, such as an array type and an object type, to assign a value to a variable, we could only specify the value directly. It is very troublesome to write in this way, but under the ES6 syntax specification, it is allowed to directly extract the required values from arrays and objects according to a certain pattern, and directly assign variables to variables. This method is called Destructuring, which is simple to understand. That is, the left and right sides of the equal sign are equal.
Post a Comment
Read more

favicon.ico 404 Not Found Causes and Solutions

 What is favicon? It is the abbreviation of Favorites Icon. Its function is that in addition to displaying the corresponding title in the browser's favorites, icons can also be used to distinguish different websites. When I encounter this kind of error, I feel very uncomfortable. There is obviously no problem. Why is a 404 error reported? The following is the solution.
Post a Comment
Read more