CODEWITHSUNDEEP
htmlcss
Pyae Phyo Aung
Pyae Phyo Aung

Reputation: 270

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

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.

Upvotes: 19

Views: 23222

Answers (2)

Yilmaz
Yilmaz

Reputation: 49551

You see the difference when you add border. border:10px solid black Let's say you have two boxes at the same dimension. And you want to add border to the blue one. If you have box-sizing: content-box (content-box is default), content area is "height" and "width". If you add border, content area will not change, border size will be added to the content area.

enter image description here

If you change it to box-sizing: border-box, you will have this:

enter image description here

Upvotes: 0

Hash
Hash

Reputation: 8040

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>

Upvotes: 41

Related Questions