<div class="content box">
<h2>content-box</h2>
<p>I set the width and height to 200px, but the padding and border makes the box bigger.</p>
</div>
<div class="border box">
<h2>border-box</h2>
<p>I set the width and height to 200px, and it is exactly 200px wide/tall.</p>
</div>.box {
background: gray;
width: 200px;
height: 200px;
padding: 20px;
border: 5px solid black;
margin: 10px; /* adds some space between the boxes */
float: left; /* side by side so easier to see */
}
.box.border {
box-sizing: border-box;
}
External CSS
This Pen doesn't use any external CSS resources.