2019-07-15
What is the difference between border-box and content-box in CSS?
stackoverflow
Question

What is the difference between border-box and content-box in CSS? I am not clearly understand between these two boxes. For example, box-sizing:border-box; and box-sizing:content-box; The output of the two styles look similar.

Answer
1

While box-sizing: border-box; uses the box-model that people have come to associate with Internet Explorer, where the dimensions of the padding and border are included in the element’s dimensions. enter image description here (image source)

Example:

enter image description here (image source)

Demo Added.

$("#content").on("click", function() { 
  $("*").css("box-sizing", $(this).text()); 
}); 
 
$("#border").on("click", function() { 
  $("*").css("box-sizing", $(this).text()); 
});
.parent { 
  width: 50%; 
  border: 5px solid #E18728; 
  float: left; 
} 
 
.child { 
  width: 90%; 
  padding: 20%; 
  border: 4px solid black; 
  margin: .5em auto; 
} 
 
.twins { 
  width: 50%; 
  padding: 1em; 
  border: 4px solid black; 
  float: left; 
} 
 
 
/* styling for Pen, not related to box-sizing or layout */ 
 
body { 
  font-family: sans-serif; 
  font-size: 1.1em; 
} 
 
.buttons { 
  margin-bottom: .5em; 
} 
 
p:not(.intro) { 
  text-align: center; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="buttons"> 
  <p class="intro">Click the <code>border-box</code> button to fix the layout with the power of Box Sizing!</p> 
  <button id="content">content-box</button> 
  <button id="border">border-box</button> 
</div> 
<div class="parent"> 
  <p>Parent div with 50% width.</p> 
  <div class="child"> 
    <p>Child div with 90% width, 4px black border, and 20% padding </p> 
  </div> 
  <div class="twins"> 
    <p>Child div with 50% width, 4px black border, and 1em padding</p> 
  </div> 
  <div class="twins"> 
    <p>Child div with 50% width, 4px black border, and 1em padding</p> 
  </div> 
</div>

What is the difference between border-box and content-box in CSS?
See more ...