0Pricing
CSS Academy · Lesson

Box-Sizing: Content-Box vs Border-Box

Understand how box-sizing changes how width and height calculations include padding and border.

The box-sizing Problem

By default, CSS sets width on the content area only. Adding padding or border increases the element's actual rendered size, which is confusing and error-prone.

/* Content-box: rendered width = 200 + 20 + 20 + 2 + 2 = 244px */
.box {
  width: 200px;
  padding: 20px;
  border: 2px solid black;
}

content-box (Default)

box-sizing: content-box is the default. width and height apply to the content only. Padding and border are added on top, growing the element beyond the set size.

All lessons in this course

  1. Understanding Width Height Margin and Padding
  2. Border Styles Width and Color
  3. Box-Sizing: Content-Box vs Border-Box
  4. Outline and Box-Shadow
← Back to CSS Academy