Code has been added to clipboard!

The Box-Sizing CSS Property

Reading time 1 min
Published Aug 8, 2017
Updated Oct 15, 2019

CSS box sizing explained

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

Example
div {
    box-sizing: border-box;
    width: 200px;
    height: 300px;
    border: 2px solid green;
}
Udacity
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
Coursera
Pros
  • Professional service
  • Flexible timetables
  • A variety of features to choose from
Main Features
  • Professional certificates of completion
  • University-level courses
  • Multiple Online degree programs
Datacamp
Pros
  • Great user experience
  • Offers quality content
  • Very transparent with their pricing
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable

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;

Example
.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:

box-sizing Width Border Padding Actual element width Actual content width
content-box 200 20 10 260 200
border-box 200 20 10 200 140

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

Browser support

Browser image
Chrome
10+
Browser image
Edge
12+
Browser image
Firefox
29+
Browser image
IE
8+
Browser image
Opera
7+
Browser image
Safari
5.1+

Mobile browser support

Browser image
Chrome
18+
Browser image
Firefox
29+
Browser image
Opera
All
Browser image
Safari
All

Latest Udacity Coupon Found:

Verified STAFF PICK

75% OFF COURSES

Udacity Black Friday Offer

The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!

Expiration date: 18/01/2021
3176 People Used
Only 97 Left
Rating
5.0