CSS: Box Sizing

By Xah Lee. Date: . Last updated: .

box-sizing property controls the meaning of width property.

Normally, width means the content of a element. If you add padding and border, the result width from border to border will be bigger than the width value you used.

Suppose you have 2 div each has width: 50%. Now you add padding to it, suddenly, your boxes isn't side by side anymore, they don't fit. Each box's actual width from border to border is 50%+ padding + border.

But if you say box-sizing:border-box, your boxes are side by side again.

[see CSS: Margin vs Padding]

[see CSS: Border]

Propertie Values

The default behavior, is called “CSS Box Model”.

Examples

Here's a box with width 200px and padding and border. The actual width from border to border is 250px.

display: inline-block;
width:200px;
padding: 20px;
border: solid 5px blue;
box-sizing:content-box;

Here's a box with width 200px and padding, and using box-sizing:border-box;. The actual width from border to border is 200px.

display: inline-block;
width:200px;
padding: 20px;
border: solid 5px blue;
box-sizing:border-box;

Here's a box with width 200px and no padding, for comparison.

display: inline-block;
width:200px;
box-sizing:border-box;

Note: display: inline-block is used to force content stay inside the box.

Site Wide Border Model

It's a good idea to add this to your CSS, to make all width border based.

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
Like it? Help me by telling your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

CSS Basics

  1. Basics
  2. Tag Matching Tutorial
  3. Selector Syntax
  4. Units

Color

  1. Color Syntax
  2. Color Names
  3. Opacity
  4. Linear Gradient
  5. Radial Gradient

Font

  1. font-family
  2. Standard Web Fonts
  3. font-size
  4. Meaning of Font Size
  5. Font Weight
  6. Chinese Font Names

Box Model

  1. Border
  2. Outline
  3. Margin vs Padding
  4. Box Sizing

Layout

  1. Layout Tutorial
  2. Display Property
  3. Position: static, relative, fixed, absolute
  4. Pure CSS Table
  5. Tabbed Menu
  6. 3 Columns Page Layout
  7. Multi-Column Layout for Text Flow
  8. Fix Element to Window
  9. Centering
  10. Flowing List
  11. z-index
  12. Text Over Image
  13. Text Flow Around Image
  14. OverFlow, Scrollbar

Transform/Animation

  1. 2D Transform
  2. Transition
  3. Animation

Line Wrap, Justification

  1. Line Wrap
  2. Text Alignment, Justification
  3. Match first-letter and first-line
  4. “:before”, “:after”
  5. Text Decoration: Underline, Overline, Line-Through
  6. Letter Spacing, Word Spacing

Box Decoration

  1. Box Shadow
  2. Text Shadow
  3. Round Corners
  4. Background Image
  5. Image Rollover

Misc

  1. Computed Style
  2. Pseudo Class vs Pseudo Element
  3. Media Query
  4. Variable
  5. calc
  6. Reset
  7. user-select
  8. Data URI Scheme
  9. protocol-relative URL
  10. Default Unit
  11. Declaring Character Set in CSS File
  12. Jargons Explained: Tag, Element, Node, Object, Attribute, Property, Method
  13. Display Table on Small Screen
  14. Fixed Aspect Ratio
  15. Add Icon to Links
  16. Progress Bar Example

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials