{"id":13978,"date":"2011-08-31T20:05:34","date_gmt":"2011-09-01T03:05:34","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=13978"},"modified":"2023-01-18T13:29:08","modified_gmt":"2023-01-18T21:29:08","slug":"box-sizing","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/b\/box-sizing\/","title":{"rendered":"box-sizing"},"content":{"rendered":"\n

The box-sizing<\/code> property in CSS controls how the box model<\/a> is handled for the element it applies to.<\/p>\n\n\n\n

.module {\n  box-sizing: border-box;    \n}<\/code><\/pre>\n\n\n\n
One of the more common ways to use it is to apply it to all elements on the page, pseudo elements<\/a> included:<\/p>\n\n\n\n
*, *::before, *::after {\n  box-sizing: border-box;\n}<\/code><\/pre>\n\n\n\n
This is often called “universal box-sizing”, and it’s a good way to work! The (literal) width<\/code> you set is the width you get, without having to perform mental math and manage the complexity that comes from widths that come from multiple properties. We even have a box-sizing awareness day<\/a> around here.<\/p>\n\n\n
Values<\/h3>\n\n\n
    \n
  • content-box<\/code>: the default. Width and height values apply to the element’s content only. The padding and border are added to the outside of the box.<\/li>\n\n\n\n
  • padding-box<\/code>: Width and height values apply to the element’s content and its padding. The border is added to the outside of the box. Currently, only Firefox supports the padding-box<\/code> value.<\/li>\n\n\n\n
  • border-box<\/code>: Width and height values apply to the content, padding, and border.<\/li>\n\n\n\n
  • inherit<\/code>: inherits the box sizing of the parent element.<\/li>\n<\/ul>\n\n\n
    Example<\/h3>\n\n\n
    This example image compares the default content-box<\/code> (top) to border-box<\/code> (bottom):<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    The red line between the images represents the elements’ width value. Notice that the element with the default box-sizing: content-box;<\/code> exceeds the declared width when the padding and border are added to the outside of the content box, while the element with box-sizing: border-box;<\/code> applied fits completely within the declared width.<\/p>\n\n\n
    Using Box Sizing<\/h3>\n\n\n
    Let’s say you set an element to width: 100px; padding: 20px; border: 5px solid black;<\/code>. By default, the resulting box is 150px wide. That’s because the default box sizing model is content-box<\/code>, which applies an element’s declared width to its content only, placing the padding and border outside the element’s box. This effectively increases how much space the element takes up.<\/p>\n\n\n\n
    If you change the box-sizing<\/code> to padding-box<\/code>, the padding is pushed inside the element’s box. Then, the box would be 110px wide, with 20px of padding on the inside and 10px of border on the outside. If you want to put the padding and<\/em> the border inside the box, you can use border-box<\/code>. The box would then be 100px wide \u2014 the 10px of border and 20px of padding are both pushed inside the element’s box.<\/p>\n\n\n
    Demo<\/h3>\n\n\n