CSS3 Box-Sizing Property

The CSS3 box-sizing property allows us to include the padding and border in an element's total width and height. So if you set box-sizing: border-box; on an element, the padding and border are included in the width and height:

HTML file: Displayed by browser:
<style>
.div1 {
    width: 300px;
    height: 100px;
    border: 5px solid blue;
    box-sizing: border-box;
}

.div2 {
    width: 300px;
    height: 100px;
    padding: 50px;
    border: 5px solid red;
    box-sizing: border-box;
}
</style>
<body>
<div class="div1">Both divs are the same size now!</div>
<br />
<div class="div2">Hooray!</div>
</body>
Both divs are the same size now!

Hooray!

These two <div> elements are the same sizes with box-sizing: border-box; added to both elements.

Back button Table of Contents Next button