CSS box model

Last updated

Box Model
CSS Box Model Module Level 3
Boxmodell-detail.png
The CSS box model
Native name
CSS Box Model Module Level 3
StatusW3C Candidate Recommendation Snapshot
Latest versionLevel 3
December 22, 2020 (2020-12-22) [1]
Organization World Wide Web Consortium
CommitteeCSS Working Group
Editors
  • Elika J. Etemad [1]
  • Bert Bos [2]
  • Anton Prowse [2]
Base standards CSS
Domain CSS
Website www.w3.org/TR/css-box-3/

In web development, the CSS box model refers to how HTML elements are modeled in browser engines and how the dimensions of those HTML elements are derived from CSS properties. It is a fundamental concept for the composition of HTML webpages. [3] The guidelines of the box model are described by web standards World Wide Web Consortium (W3C) specifically the CSS Working Group. For much of the late-1990s and early 2000s there had been non-standard compliant implementations of the box model in mainstream browsers. With the advent of CSS2 in 1998, which introduced the box-sizing property, the problem had mostly been resolved.

Contents

Specifics

The Cascading Style Sheets (CSS) specification describes how elements of web pages are displayed by graphical browsers. Section 4 of the CSS1 specification defines a "formatting model" that gives block-level elements—such as p and blockquote—a width and height, and three levels of boxes surrounding it: padding, borders, and margins. [4] While the specification never uses the term "box model" explicitly, the term has become widely used by web developers and web browser vendors.

All HTML elements can be considered "boxes", this includes div tag, p tag, or a tag. Each of those boxes has five modifiable dimensions:

  • the height and width describe dimensions of the actual content of the box (text, images, ...)
  • the padding describes the space between this content and the border of the box
  • the border is any kind of line (solid, dotted, dashed...) surrounding the box, if present
  • the margin is the space around the border

According to the CSS1 specification, released by W3C in 1996 and revised in 1999, when a width or height is explicitly specified for any block-level element, it should determine only the width or height of the visible element, with the padding, borders, and margins applied afterward. [4] [5] Before CSS3, this box model was known as W3C box model, in CSS3, it is known as the content-box.

The total width of a box is therefore left-margin + left-border + left-padding + width + right-padding + right-border + right-margin. Similarly, the total height of a box equals top-margin + top-border + top-padding + height + bottom-padding + bottom-border + bottom-margin.

For example, the following CSS code

.myClass{width:200px;height:100px;padding:10px;border:solid10pxblack;margin:10px;}

would specify the box dimensions of each block belonging to 'myClass'. Moreover, each such box will have total height 160px and width 260px.

CSS3 introduced the Internet Explorer box model to the standard, known referred to as border-box. [6]

History

The difference in how width is interpreted between the W3C and Internet Explorer box models W3C and Internet Explorer box models.svg
The difference in how width is interpreted between the W3C and Internet Explorer box models

Before HTML 4 and CSS, very few HTML elements supported both border and padding, so the definition of the width and height of an element was not very contentious. However, it varied depending on the element. The HTML width attribute of a table defined the width of the table including its border. [7] On the other hand, the HTML width attribute of an image defined the width of the image itself (inside any border). [8] The only element to support padding in those early days was the table cell. Width for the cell was defined as "the suggested width for a cell content in pixels excluding the cell padding." [9]

In 1996, CSS [10] introduced margin, border and padding for many more elements. It adopted a definition width in relation to content, border, margin and padding similar to that for a table cell. [11] This has since become known as the W3C box model.

At the time, very few browser vendors implemented the W3C box model to the letter. The two major browsers at the time, Netscape 4.0 and Internet Explorer 4.0 both defined width and height as the distance from border to border. [12] This has been referred to as the traditional [13] or the Internet Explorer box model. [14]

Internet Explorer in "quirks mode" includes the content, padding and borders within a specified width or height; this results in a narrower or shorter rendering of a box than would result following the standard behavior. [15]

The Internet Explorer box model behavior was often considered a bug, because of the way in which earlier versions of Internet Explorer handle the box model or sizing of elements in a web page, which differs from the standard way recommended by the W3C for the Cascading Style Sheets language. [16] [17] As of Internet Explorer 6, the browser supports an alternative rendering mode (called the "standards-compliant mode") which solves this discrepancy. However, for backward compatibility reasons, all versions still behave in the usual, non-standard way by default (see quirks mode). Internet Explorer for Mac is not affected by this non-standard behavior.

Workarounds

Internet Explorer versions 6 and onward are not affected by the bug if the page contains certain HTML document type declarations. These versions maintain the buggy behavior when in quirks mode for reasons of backward compatibility. [18] For example, quirks mode is triggered:

Various workarounds have been devised to force Internet Explorer versions 5 and earlier to display Web pages using the W3C box model. These workarounds generally exploit unrelated bugs in Internet Explorer's CSS selector processing in order to hide certain rules from the browser. The best known of these workarounds is the "box model hack" developed by Tantek Çelik, a former Microsoft employee who developed this idea while working on Internet Explorer for the Macintosh. It involves specifying a width declaration for Internet Explorer for Windows, and then overriding it with another width declaration for CSS-compliant browsers. This second declaration is hidden from Internet Explorer for Windows by exploiting other bugs in the way that it parses CSS rules. The implementation of these CSS "hacks" has been further complicated by the public release of Internet Explorer 7, which has had some issues fixed, but not others, causing undesired results in pages using these hacks. [18]

Box model hacks have proven unreliable because they rely on bugs in browsers' CSS support that may be fixed in later versions. For this reason, some Web developers have instead recommended either avoiding specifying both width and padding for the same element or using conditional comment and/or CSS filters to work around the box model bug in older versions of Internet Explorer. [14] [20]

Support for Internet Explorer's box model

Web designer Doug Bowman has said that the original Internet Explorer box model represents a better, more logical approach. [21] Peter-Paul Koch gives the example of a physical box, whose dimensions always refer to the box itself, including potential padding, but never its content. [13] He says that this box model is more useful for graphic designers, who create designs based on the visible width of boxes rather than the width of their content. [22] Bernie Zimmermann says that the Internet Explorer box model is closer to the definition of cell dimensions and padding used in the HTML table model. [23]

The W3C has included a "box-sizing" property in CSS3. When box-sizing: border-box; is specified for an element, any padding or border of the element is drawn inside the specified width and height, "as commonly implemented by legacy HTML user agents". [24] Internet Explorer 8, WebKit browsers such as Apple Safari 5.1+ and Google Chrome, Gecko-based browsers such as Mozilla Firefox 29.0 and later, Opera 7.0 and later, and Konqueror 3.3.2 and later support the CSS3 box-sizing property. Gecko browsers previous than 29.0 support the same functionality using the browser-specific -moz-box-sizing property. [25] border-box is the default box model used in Bootstrap framework.

Related Research Articles

Dynamic HTML, or DHTML, is a term which was used by some browser vendors to describe the combination of HTML, style sheets and client-side scripts that enabled the creation of interactive and animated documents. The application of DHTML was introduced by Microsoft with the release of Internet Explorer 4 in 1997.

<span class="mw-page-title-main">HTML</span> HyperText Markup Language

The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It defines the meaning and structure of web content. It is often assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

Scalable Vector Graphics (SVG) is an XML-based vector image format for defining two-dimensional graphics, having support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium since 1999.

An HTML element is a type of HTML document component, one of several types of HTML nodes. The first used version of HTML was written by Tim Berners-Lee in 1993 and there have since been many versions of HTML. The most commonly used version is HTML 4.01, which became official standard in December 1999. An HTML document is composed of a tree of simple HTML nodes, such as text nodes, and HTML elements, which add semantics and formatting to parts of document. Each element can have HTML attributes specified. Elements can also have content, including other elements and text.

Vector Markup Language (VML) is an obsolete XML-based file format for two-dimensional vector graphics. It was specified in Part 4 of the Office Open XML standards ISO/IEC 29500 and ECMA-376. According to the specification, VML is a deprecated format included in Office Open XML for legacy reasons only.

<span class="mw-page-title-main">Håkon Wium Lie</span> Norwegian software engineer

Håkon Wium Lie is a Norwegian web pioneer, a standards activist, and the Chief Technology Officer of Opera Software from 1998 until the browser was sold to new owners in 2016. He is best known for developing Cascading Style Sheets (CSS) while working with Tim Berners-Lee and Robert Cailliau at CERN in 1994.

JavaScript Style Sheets (JSSS) was a stylesheet language technology proposed by Netscape Communications in 1996 to provide facilities for defining the presentation of webpages. It was an alternative to the Cascading Style Sheets (CSS) technology.

A spacer GIF is a small, transparent GIF image that is used in web design and HTML coding. They were used to control the visual layout of HTML elements on a web page, at a time when the HTML standard alone did not allow this. They became mostly obsolete after the browser wars-fueled addition of layout attributes to HTML 2.0 table tags, and were mostly unused by the time Cascading Style Sheets became widely adopted.

<span class="mw-page-title-main">Acid2</span> Online HTML rendering test

Acid2 is a webpage that test web browsers' functionality in displaying aspects of HTML markup, CSS 2.1 styling, PNG images, and data URIs. The test page was released on 13 April 2005 by the Web Standards Project. The Acid2 test page will be displayed correctly in any application that follows the World Wide Web Consortium and Internet Engineering Task Force specifications for these technologies. These specifications are known as web standards because they describe how technologies used on the web are expected to function.

In computing, quirks mode is a technique used by some web browsers for the sake of maintaining backward compatibility with web pages designed for old web browsers instead of strictly complying with W3C and IETF standards in standards mode. This behavior has since been codified in the standard, so what was previously standards mode is now referred to as simply no quirks mode.

Tableless web design is a web design method that avoids the use of HTML tables for page layout control purposes. Instead of HTML tables, style sheet languages such as Cascading Style Sheets (CSS) are used to arrange elements and text on a web page.

The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images. It is a low level, procedural model that updates a bitmap. HTML5 Canvas also helps in making 2D games.

<span class="mw-page-title-main">Internet Explorer 8</span> Web browser for Windows released in 2009

Windows Internet Explorer 8 (IE8) is the eighth and, by now, discontinued version of the Internet Explorer web browser for Windows. It was released by Microsoft on March 19, 2009, as the successor to Internet Explorer 7. It was the default browser in Windows 7 and Windows Server 2008 R2.

<span class="mw-page-title-main">Web typography</span> Publishing considerations for the Web

Web typography is the use of fonts on the World Wide Web. When HTML was first created, font faces and styles were controlled exclusively by the settings of each web browser. There was no mechanism for individual Web pages to control font display until Netscape introduced the font element in 1995, which was then standardized in the HTML 3.2 specification. However, the font specified by the font element had to be installed on the user's computer or a fallback font, such as a browser's default sans-serif or monospace font, would be used. The first Cascading Style Sheets specification was published in 1996 and provided the same capabilities.

Extensible HyperText Markup Language (XHTML) is part of the family of XML markup languages. It mirrors or extends versions of the widely used HyperText Markup Language (HTML), the language in which Web pages are formulated.

Animation of Scalable Vector Graphics, an open XML-based standard vector graphics format is possible through various means:

<span class="mw-page-title-main">CSS</span> Style sheet language

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

Argo was part of a project to make the Internet accessible to scholars in the Humanities at the University of Groningen. The Argo web browser was created in August 1994 by Bert Bos.

<span class="mw-page-title-main">Holy grail (web design)</span> CSS programming trick for dividing a web page into three columns

The holy grail is a web page layout which has multiple equal-height columns that are defined with style sheets. It is commonly desired and implemented, but for many years, the various ways in which it could be implemented with available technologies all had drawbacks. Because of this, finding an optimal implementation was likened to searching for the elusive Holy Grail.

Media queries is a feature of CSS 3 allowing content rendering to adapt to different conditions such as screen resolution. It became a W3C recommended standard in June 2012, and is a cornerstone technology of responsive web design (RWD).

References

  1. 1 2 Etemad, Elika J., ed. (22 December 2020). "CSS Box Model Module Level 3". W3C. Level 3. CSS Working Group. Retrieved 9 April 2021.
  2. 1 2 Bos, Bert; Prowse, Anton, eds. (6 July 2018). "CSS Basic Box Model Level 3". W3C. 31 July 2018. CSS Working Group. Retrieved 9 April 2021.
  3. ↑ "CSS". MDN Web Docs. 23 March 2019. Retrieved 30 March 2019.
  4. 1 2 Wium Lie, Håkon; Bos, Bert (11 January 1999). "Cascading Style Sheets, level 1 § Formatting model". World Wide Web Consortium . Retrieved 26 October 2017.
  5. ↑ Håkon Wium Lie; Bert Bos (17 December 1996). "Cascading Style Sheets, level 1". World Wide Web Consortium . Retrieved 9 December 2006.
  6. ↑ Peter-Paul Koch (2013). "CSS – box-sizing". quirksmode.org. Retrieved 30 March 2019.
  7. ↑ Raggett, Dave (23 January 1996). "The HTML3 Table Model". World Wide Web Consortium . Retrieved 26 October 2017. "RFC 1942 HTML Tables". IETF. The default table width is the space between the current left and right margins.
  8. ↑ Raggett, Dave; Le Hors, Arnaud; Jacobs, Ian (24 December 1999). "13 Objects, Images, and Applets § Width and height". World Wide Web Consortium . Retrieved 26 October 2017.
  9. ↑ Raggett, Dave (14 January 1997). "HTML 3.2 Reference Specification". World Wide Web Consortium . Retrieved 26 October 2017.
  10. ↑ Wium Lie, Håkon; Bos, Bert (17 December 1996). "Cascading Style Sheets, level 1". World Wide Web Consortium . Retrieved 26 October 2017.
  11. ↑ Wium Lie, Håkon; Bos, Bert (17 December 1996). "Cascading Style Sheets, level 1". World Wide Web Consortium . Retrieved 26 October 2017.
  12. ↑ Koch, Peter-Paul. "Box model tweaking". XS4ALL . Retrieved 26 October 2017.
  13. 1 2 Koch, Peter-Paul. "CSS – box-sizing". QuirksMode. Retrieved 26 October 2017.
  14. 1 2 Johansson, Roger (21 December 2006). "Internet Explorer and the CSS box model". 456 Berea Street. Retrieved 26 October 2017.
  15. ↑ Lance Silver (March 2001). "CSS Enhancements in Internet Explorer 6". Microsoft Developer Network . Microsoft . Retrieved 24 June 2007.
  16. ↑ Shafer, Dan (2005). HTML Utopia: Designing Without Tables Using CSS. Melbourne: Sitepoint. pp.  124 & Appendix C. ISBN   0-9579218-2-9.
  17. ↑ Shea, David; Molly E. Holzschlag (2005). The Zen of CSS Design. Berkeley: Peachpit Press. ISBN   0-321-30347-4.
  18. 1 2 Markus Mielke (26 September 2006). "Cascading Style Sheet Compatibility in Internet Explorer 7". Microsoft Developer Network . Microsoft . Retrieved 24 June 2007. "Pages authored under non-strict mode (quirks) will not change behavior in IE7 and will not be affected by broken CSS filters.Pages authored under non-strict mode (or "quirks mode") will not change behavior in IE7."
  19. ↑ "!DOCTYPE". Microsoft Developer Network . Microsoft . Retrieved 13 January 2007. "The following examples show how to use the !DOCTYPE declaration to specify the DTD a document conforms to, and to switch Internet Explorer 6 and later to standards-compliant mode."
  20. ↑ Arve Bersvendsen (February 2004). "Hack-free CSS for IE". Arve Bersvendsen's weblog. Archived from the original on 15 January 2007. Retrieved 16 January 2007.
  21. ↑ "Vorsprung durch Webstandards | Douglas Bowman declares his love to CSS". Vorsprungdurchwebstandards.de. Archived from the original on 14 June 2010. Retrieved 7 July 2010.
  22. ↑ "Vorsprung durch Webstandards | Peter-Paul Koch declares his love to CSS". Vorsprungdurchwebstandards.de. Archived from the original on 27 February 2010. Retrieved 7 July 2010.
  23. ↑ "Box Model Enlightenment, Bernie Zimmermann". Bernzilla.com. 4 April 2003. Archived from the original on 27 December 2010. Retrieved 7 July 2010.
  24. ↑ "CSS3 Basic User Interface Module". World Wide Web Consortium.
  25. ↑ "-moz-box-sizing". Mozilla Developer Center . Mozilla. 11 April 2009. Retrieved 11 April 2009. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification.
This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.