CSS Box Model

Every element has an underlying box. Source: Rollins 2018.
Every element has an underlying box. Source: Rollins 2018.

CSS is used to style HTML documents. An important insight is that,

Every element in web design is a rectangular box

No matter how complex the design, at the level of elements, it's just a bunch of boxes. The "box" is an underlying representation. We don't actually see a box unless the designer chooses to show it's border.

Each box has width and height. It's border may or may not be visible. Content resides within the box. Content maybe surrounded by extra spacing. Each box is separated from its neighbouring boxes by defined distances. The CSS Box Model formalizes these ideas in terms of CSS properties and the values they can accept.

Understanding the box model is essential for any web designer or developer. Browsers have built-in tools that enable developers visualize these boxes during development and debugging.

Discussion

  • Which are the essential elements of the CSS Box Model?
    Main elements of the CSS Box Model. Source: Manisha 2019.
    Main elements of the CSS Box Model. Source: Manisha 2019.

    Suppose there's a text element <div>Hello World!</div>. Let's assume that content begins at the left edge of the box and flows to the right. Content "Hello World!" is placed within the box. The box has a size defined by height and width. These dimensions are calculated from the size of the parent element, size of the content or defined explicitly for the element.

    The edge of the box is called the border. Border can be invisible, thin (few pixels) or thick (many pixels). It can be a solid line, a dotted line, and so on. It can be in a chosen colour.

    If we include extra spacing within the box along its edges, this is called padding. An element usually appears next to other elements (parent or siblings). The separation from one element to the next is defined by margin.

    Border, padding and margin can all have different values for each side of the box. Some border properties are inherited by default. Padding and margin are not inherited by default unless declared explicitly.

  • How is margin different from padding?
    Illustrating the effect of border, padding and margin. Source: Adapted from Rollins 2018.
    Illustrating the effect of border, padding and margin. Source: Adapted from Rollins 2018.

    Margin occurs outside the box to separate elements. Padding occurs within the box to add spacing between box edge and content. To put it differently, margin controls rendering of an element and its neighbours, whereas padding controls rendering of an element and its children.

    Because padding area is within the box, CSS properties applied to the box affect the padding area as well. For example, if the element has green background colour, the padding area will have green background but the margin background colour is not affected. In fact, the margin background colour will be determined by that of the parent element.

    Non-zero padding increases the overall dimensions of the element. Margin adds spacing outside the box. Adding a margin is like shifting the entire box whereas adding padding is like shifting the content within the box.

    Padding can't be negative but margin can be negative. With a negative margin, an element can "jump out" of its parent or overlap with another element.

  • How are width and height of a box determined?
    With 'box-sizing:border-box', box width and height stay the same. Source: Adapted from Rollins 2018.
    With 'box-sizing:border-box', box width and height stay the same. Source: Adapted from Rollins 2018.

    Total width of an element is calculated as margin-right + border-right + padding-right + width + padding-left + border-left + margin-left, where width is the box width. The calculation for height is similar, using top and bottom rather than right and left.

    If element has CSS declaration box-sizing: border-box; then total width changes to margin-right + width + margin-left. Padding and border sizes don't affect total box dimensions. Content area shrinks.

    Box width and height can be specified in CSS, for example width: 50% and height: 100px. Values are either absolute (pixels, points, inches, etc) or relative (percentage of parent, percentage of viewport, fraction of font size, etc).

    If width and height are not specified, they're determined by the content. For block elements, width is 100% of the parent by default. It's better to specify them if the element size is essential to the overall layout.

    If width and height are specified, but if the content requires more space than available, rendering behaviour is controlled by overflow property, which can take values visible, hidden, scroll and auto.

  • How do I use display CSS property?
    Effect of inline, inline-block and block on a span element. Source: Adapted from MDN Web Docs 2020a.
    Effect of inline, inline-block and block on a span element. Source: Adapted from MDN Web Docs 2020a.

    CSS display property is important since it affects how the box is rendered. Common values for display include:

    • none: Element is not displayed. Unlike visibility:hidden that hides an element but leaves an empty space, display:none leaves no empty space.
    • inline: Element is displayed on the same line as adjacent elements. Height and width are determined by the content and can't be set explicitly. This is the default for span, a, img, em, strong, i, small, etc. Only left and right margins are applicable. Padding is applicable on all four sides but top and bottom padding may bleed into lines above and below.
    • inline-block: Similar to inline but height and width can be set. Box model properties are applicable here. The problem of vertical bleeding seen in inline is solved with inline-block.
    • block: Element is displayed on a separate line and takes up 100% width of the parent. This is the default for div, h1, p, li, section, etc.
  • What are some variants of the box model?
    Illustrating different values on 'position' property. Source: James 2020.
    Illustrating different values on 'position' property. Source: James 2020.

    While the box model is often displayed as inline, inline-block or block, there are other variants. A specialization of the box model is display:table. This obeys block flow. Cells flow into rows and columns. Table box has margins but not padding. Cells have padding but not margins. Properties border-collapse and table-layout are applicable.

    Another variation is display:list-item, equivalent to using <li> tag. Property list-style-type is applicable.

    It's possible to take out an element from normal flow and put it in a separate layer. This is achieved with property position. Common values include absolute (relative to closest ancestor), relative (relative to itself in normal flow) and fixed (relative to viewport, unaffected by scrolling). Such boxes don't affect the position of other boxes. These boxes can overlap freely. Property z-index controls how they overlap, with larger values coming on top.

    Another way to take out an element from normal flow is with float. Common values include left, right, inline-start and inline-end. Unlike position, boxes affect adjacent content in the flow. For example, a box floated left will indent adjacent content to the right.

  • What is margin collapsing?
    Illustrating margin collapsing. Source: Seifi 2008.
    Illustrating margin collapsing. Source: Seifi 2008.

    Consider two sibling elements, each set with margin of 20px. With inline-block display, elements are separated by 40px since margins are additive. However, if we change to block display, adjacent margins collapse into a single margin of 20px. Note that padding is not subject to collapsing.

    Collapsed margin size is the largest of the individual margins. If there are negative margins involved, collapsed margin is the most positive or the most negative margin. When all margins are negative, it collapses to the most negative margin.

    Margin collapsing happens for adjacent siblings; when there's no content separating parent and descendants; for empty blocks; and more complex scenarios when these conditions are combined.

    It's been said that margin collapsing is one of design mistakes in CSS. There are rules to when margins can collapse but there are also many exceptions to the rules. This makes it difficult and confusing for a web developer. One way to overcome this complexity is to consistently set right and bottom margins and zero out top and left margins, such as, margin: 0 40px 40px 0;.

  • Could you share some tips for working with CSS Box Model?

    Here are some useful tips for beginners:

    • If width is not set, it defaults to 100%. Padding and border will push inwards. If width is explicitly set to 100%, padding and border will push outwards as normal.
    • Left and right margins can take the value auto to center the element horizontally. This is not possible with padding. For centering vertically, use display: table-cell; vertical-align: middle; for the element and display: table for its parent. CSS Flexbox offers a simpler approach.
    • To inherit only right margin and fix other margins, use margin: 10px 0 20px 15px; margin-right: inherit;.
    • Use box-shadow with rgba values to improve design quality.
    • To fit images to a certain width without exceeding the original width or distorting it, use max-width: 100%; height: auto;.
    • Element height depends on content height and remains unaffected by height: 100%. Height can be controlled using padding, such as height: 0; padding-bottom: 100%;.
    • Columns with different content can be made to have the same height using large padding and negative margin. Suppose bottom padding is 10px, we can use margin-bottom: -99999px; padding-bottom: 100009px;. CSS Flexbox offers a simpler approach.
  • Which are some CSS modules that are relevant to the CSS Box Model?

    CSS Intrinsic & Extrinsic Sizing is the module that talks about box-sizing property that's directly relevant to the box model. This property can take values content-box (default) and border-box.

    The box model relates to only one element. When designing layout, the use of CSS properties margin, display and float are helpful. However, there are CSS3 modules that work with the box model and simplify layout design:

    • CSS Flexbox: Children of a container can adjust their sizes to fit the container. This can happen in one dimension, either horizontally or vertically. By nesting, two-dimensional layouts can be achieved.
    • CSS Grid: A two-dimensional layout system that's easier to work with than Flexbox. This is a modern alternative to the <table> tag from the early days of HTML.
    • CSS Multi-column: Content flows into multiple columns with gap and rule between columns.

    Another useful module is CSS Box Alignment that works with layout modules to align elements within their container parent. Elements can be positioned within the parent, spaces between elements can be controlled, and containers can be configured to align the elements within.

Milestones

Dec
1996
Terminology of CSS box model in the original CSS1 specification. Source: Lie and Bos 1996, sec. 4.1.
Terminology of CSS box model in the original CSS1 specification. Source: Lie and Bos 1996, sec. 4.1.

W3C publishes Cascading Style Sheets, level 1, simply called CSS1, to express styling of HTML documents. It borrows from desktop publishing terminology. It states that each formatted element is treated as a rectangular box surrounded by optional padding, border and margin areas. Top and bottom margins can collapse.

Aug
2001
Before IE6, IE box model didn't conform to W3C box model. Source: Wikipedia 2020a.
Before IE6, IE box model didn't conform to W3C box model. Source: Wikipedia 2020a.

Microsoft releases Internet Explorer 6, which conforms to the W3C CSS box model. Earlier releases of IE implemented a modified box model that ignored border and padding when computing the total width or height of an element: total width = margin-left + width + margin-right. Effectively, earlier versions of IE reduced content size to make room for border and padding. This behaviour is possible in CSS3 via box-sizing: border-box;.

Aug
2002
Terminology of CSS box model in the CSS2.1 specification. Source: Bos et al. 2011.
Terminology of CSS box model in the CSS2.1 specification. Source: Bos et al. 2011.

First draft of CSS2.1 is published, which is a revision of CSS2 from 1997. CSS2.1 becomes a W3C Recommendation in June 2011. For clarify, it adds the terms border edge and padding edge. Inner edge is also called content edge. Outer edge is also called margin edge. Unlike in CSS1, margin, padding and border properties can be inherited.

Oct
2002

W3C publishes the first working draft of CSS Box Model Module Level 3. Subsequent revisions of this draft appear in 2007, 2018 and 2020. The main change is to bring clarity for vertical writing modes.

2011

Bowers et al. publish the book Pro HTML5 and CSS3 Design Patterns. They note that to speak of the box model as a single model is an oversimplification. They identify six types of the box model: inline, inline-block, block, table, absolute and floated.

Apr
2020

W3C publishes the first public working draft of CSS Box Model Module Level 4. Property margin-trim is introduced with three possible values: none, in-flow and all. Often we include margins between siblings but we wish to avoid margins before/after first/last sibling since they border the parent container. This property when used on an element trims margins of children that border the container's edges.

Sample Code

  • /* Source: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model
   Accessed 2020-10-13
*/
 
/* Using shorthand properties */
.box {
  width: 350px;
  height: 150px;
  margin: 10px;
  padding: 25px;
  border: 5px solid black;
}
 
/* Using longhand properties */
.box {
  margin-top: -40px;
  margin-right: 30px;
  margin-bottom: 40px;
  margin-left: 4em;
 
  padding-top: 0;
  padding-right: 30px;
  padding-bottom: 40px;
  padding-left: 4em;
 
  border: 1px solid #333333;
  border-top-style: dotted;
  border-right-width: 20px;
  border-bottom-color: hotpink;
}
 

References

  1. Ambriz, Juan Carlos Arias. 2019. "10 Practical CSS Tricks every developer should know." Blog, Flexiple, August 20. Accessed 2020-10-11.
  2. Atkins, Tab (ed). 2019. "CSS Values and Units Module Level 4." W3C Working Draft, January 31. Accessed 2020-10-13.
  3. Atkins, Tab, and Elika J. Etemad, (eds). 2019. "CSS Intrinsic & Extrinsic Sizing Module Level 3." W3C Working Draft, May 22. Accessed 2020-10-11.
  4. Atkins, Tab, Elika J. Etemad, and Rossen Atanassov, (eds). 2018. "CSS Flexible Box Layout Module Level 1." W3C Candidate Recommendation, November 19. Accessed 2020-10-11.
  5. Atkins, Tab, Elika J. Etemad, Rossen Atanassov, and Oriol Brufau, (eds). 2020. "CSS Grid Layout Module Level 1." W3C Candidate Recommendation, August 18. Accessed 2020-10-13.
  6. Bos, Bert. 2016. "20 Years of CSS." W3C, December 17. Accessed 2020-10-13.
  7. Bos, Bert, Tantek Çelik, Ian Hickson, and Håkon Wium Lie, (eds). 2011. "Chapter 8: Box model." In: Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification, W3C Recommendation, June 7. Updated 2016-04-12. Accessed 2020-10-11.
  8. Bowers, Michael, Dionysios Synodinos, and Victor Sumner. 2011. "Pro HTML5 and CSS3 Design Patterns." Apress. doi: 10.1007/978-1-4302-3781-5. Accessed 2020-12-09.
  9. Coyier, Chris. 2017. "The CSS Box Model." CSS-Tricks, January 28. Accessed 2020-10-11.
  10. Etemad, Elika J, (ed). 2020a. "CSS Box Model Module Level 3." W3C Working Draft, April 21. Accessed 2020-10-11.
  11. Etemad, Elika J, (ed). 2020b. "CSS Box Model Module Level 4." W3C First Public Working Draft, April 21. Accessed 2020-10-11.
  12. Etemad, Elika J., and Tab Atkins, (eds). 2020. "CSS Box Alignment Module Level 3." W3C Working Draft, April 21. Accessed 2020-10-11.
  13. George, James. 2016. "20 Essential CSS Tricks Every Designer Should Know." Web Designer Depot, October 28. Accessed 2020-10-11.
  14. Howe, Shay. 2014. "Opening the Box Model." Lesson 4 in: Learn to Code HTML & CSS. Accessed 2020-10-11.
  15. James, Oliver. 2020. "Advanced Positioning." No. 9 of HTML & CSS Is Hard, Interneting is Hard. Accessed 2020-12-09.
  16. Johansson, Roger. 2006. "Internet Explorer and the CSS box model." 456 Berea Street, December 21. Accessed 2020-10-13.
  17. Laxmi, Asha. 2017. "CSS Inheritance: An Introduction." Sitepoint, August 7. Accessed 2020-10-13.
  18. Lie, Håkon Wium and Bert Bos. 1996. "Cascading Style Sheets, level 1." W3C Recommendation, December 17. Updated 2018-09-13. Accessed 2020-10-11.
  19. Lie, Håkon Wium, Florian Rivoal, and Rachel Andrew. 2019. "CSS Multi-column Layout Module Level 1." W3C Working Draft, October 15. Accessed 2020-10-14.
  20. MDN Web Docs. 2019a. "Introduction to the CSS basic box model." MDN Web Docs, Mozilla, September 25. Accessed 2020-10-11.
  21. MDN Web Docs. 2019b. "Mastering margin collapsing." MDN Web Docs, Mozilla, July 16. Accessed 2020-10-11.
  22. MDN Web Docs. 2020a. "The box model." MDN Web Docs, Mozilla, May 26. Accessed 2020-10-11.
  23. MDN Web Docs. 2020b. "box-sizing." MDN Web Docs, Mozilla, July 29. Accessed 2020-10-11.
  24. MDN Web Docs. 2020c. "overflow." MDN Web Docs, Mozilla, September 28. Accessed 2020-10-13.
  25. MDN Web Docs. 2020d. "position." MDN Web Docs, Mozilla, November 28. Accessed 2020-12-09.
  26. MDN Web Docs. 2020e. "float." MDN Web Docs, Mozilla, October 5. Accessed 2020-12-09.
  27. Manisha. 2019. "The Box Model." Hackernoon, February 4. Accessed 2020-10-13.
  28. Mellul, David. 2018. "4 CSS tricks I’ve learnt the hard way." ITNEXT, on Medium, June 8. Accessed 2020-10-11.
  29. Microsoft Docs. 2016. "Margin and Padding." Xamarin, Microsoft Docs, April 27. Accessed 2020-10-11.
  30. Ming, Samantha. 2020. "CSS Inline vs Inline-Block vs Block." July 18. Accessed 2020-10-13.
  31. Mossesgeld, Rico. 2017. "Eight CSS Tips for Advanced Layouts and Effects." Toptal, June 9. Accessed 2020-10-11.
  32. Rollins, Nick. 2018. "Padding vs Margin: The Definitive Guide." UX Engineer, October 8. Accessed 2020-10-11.
  33. Seifi, Joe. 2008. "Understanding & Taming Collapsing Margins in CSS." July 18. Accessed 2020-10-13.
  34. Surma. 2019. "CSS Grid – Table layout is back. Be there and be square." Google Developers, January 14. Accessed 2020-10-13.
  35. W3C. 2020. "CSS Box Model Module Level 3 Publication History." W3C. Accessed 2020-10-11.
  36. Wikipedia. 2020a. "CSS box model." Wikipedia, July 31. Accessed 2020-10-11.
  37. Wikipedia. 2020b. "Internet Explorer 6." Wikipedia, September 27. Accessed 2020-10-11.
  38. fantasai. 2020. "Incomplete List of Mistakes in the Design of CSS." CSS Working Group Wiki, March 10. Accessed 2020-10-13.

Further Reading

  1. MDN Web Docs. 2020a. "The box model." MDN Web Docs, Mozilla, May 26. Accessed 2020-10-11.
  2. Howe, Shay. 2014. "Opening the Box Model." Lesson 4 in: Learn to Code HTML & CSS. Accessed 2020-10-11.
  3. Etemad, Elika J, (ed). 2020a. "CSS Box Model Module Level 3." W3C Working Draft, April 21. Accessed 2020-10-11.
  4. Ming, Samantha. 2020. "CSS Inline vs Inline-Block vs Block." July 18. Accessed 2020-10-13.
  5. Rollins, Nick. 2018. "Padding vs Margin: The Definitive Guide." UX Engineer, October 8. Accessed 2020-10-11.
  6. Shepherd, Richard. 2011. "CSS3 Flexible Box Layout: Everything I Wish I Knew When I Started." Smashing Magazine, September 19. Accessed 2020-10-11.

Article Stats

Author-wise Stats for Article Edits

Author
No. of Edits
No. of Chats
DevCoins
Avatar of user arvindpdmn arvindpdmn
3
0
1684
Avatar of user devbot5S devbot5S
1
0
11
DevCoins due to articles, chats, their likes and article hits are included.
2053
Words
2
Authors
4
Edits
0
Chats
3
Likes
7441
Hits

Cite As

Devopedia. 2022. "CSS Box Model." Version 4, February 15. Accessed 2024-06-25. https://devopedia.org/css-box-model
Contributed by
2 authors

Last updated on
2022-02-15 11:55:40