CSS Tutorial
CSS - Introduction CSS - How CSS works? CSS - Syntax CSS - Colors CSS - Backgrounds CSS - Borders CSS - Margins CSS - Padding CSS - Height/Width CSS - Box Model CSS - Text CSS - Fonts CSS - Icons CSS - Cursor CSS - Outline CSS - Links CSS - Lists CSS - Tables CSS - Display CSS - Overflow CSS - Position CSS - Float CSS - Align CSS - Opacity CSS - Combinator CSS - Pseudo Classes CSS - Pseudo Elements CSS - Attribute Selector CSS - Buttons CSS - Pagination CSS - Navigation Bar CSS - Dropdowns CSS - Specificity CSS - Transition
CSS Advanced
CSS - Rounded Corners CSS - Border Image CSS - Background CSS - Gradients CSS - Shadow CSS - Text Effects CSS - 2D Transform CSS - 3D Transform CSS - Animation CSS - Object-fit CSS - Box Sizing CSS - Filters CSS - Style Images CSS - Variables CSS - Media Queries CSS - Flexbox Layout CSS - Grid Layout
CSS Responsive
RWD - Introduction RWD - Grid View RWD - Media Queries RWD - Images
CSS References
CSS - Reference CSS - Selectors CSS - Functions CSS - Units CSS - Animatable CSS - Entities

CSS Box Sizing

By default, the actual width or height of an element is rendered on a web page depends on its width or height, padding and border properties.

The box-sizing property defines how the browser should calculate the total width and height of an element: should they include padding and borders, or not.


Without box-sizing property

The width and height of an element is calculated like this:

width + padding + border = actual width of an element

height + padding + border = actual height of an element

This means when you set the width or height of an element, the element often appear bigger than you have set because the element's border and padding are added to the element's specified width or height.

Below down are two DIV elements with the same width and height:

This div's width is 250px and height is 100px.
This div's width is 250px and height is 100px.
Run code

The box-sizing property solves this problem.



With box-sizing property

The box-sizing property allows us to include the padding and border in an element's total width and height.

If you set box-sizing:border-box; on an element, padding and border are included in the width and height:

Here, the total width is 300px.
Here, the total width is 300px.

Here is the same example as above, with box-sizing:border-box; added to both DIV elements:

Run code

In fact, using box-sizing:border-box; is now (kind of) considered a best practice. It is even recommended to use it universally in a style sheet, so the box sizing applies to all elements on a page: