The Box-Sizing CSS Property

CSS box sizing explained

The box-sizing CSS property is used to specify what exactly do the height and width values include:

div {
    box-sizing: border-box;
    width: 200px;
    height: 300px;
    border: 2px solid green;
}

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 50% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

box-sizing: CSS syntax

There are two values you can use for the box-sizing CSS property:

box-sizing: content-box; / box-sizing: border-box;

.content-box { 
    box-sizing: content-box;
} 

.border-box { 
    box-sizing: border-box; 
}

content-box is the default value for box-sizing in CSS. It means the width and height values only include content. It does not include border, margin, or padding. If your element is set to be X pixels wide and Y pixels high, its final size with border and padding will actually take up more space.

border-box means the width and height values include content, border and padding. However, it doesn't include the margin. This box sizing option simplifies working with layouts, as you can always be sure of the final size.

See an example in the table below to get a better idea of box-sizing in CSS:

Note: the padding-box value was used for the box-sizing CSS property the past, but it's been deprecated since then.

Browser support

Chrome

10+

Edge

12+

Firefox

29+

IE

8+

Opera

7+

Safari

5.1+

Mobile browser support

Chrome

18+

Firefox

29+

Opera

All

Safari

All