CSS box model: Difference between revisions

Revision as of 21:15, 21 December 2020

Revision as of 12:13, 29 January 2021

Line 11:

In [[web development]], the '''CSS box model''' refers to how HTML elements are modeled in [[browser engine]]s and how dimension of those HTML elements are derived from [[CSS]] properties. It is a fundamental concept for the composition of [[HTML]] webpages.<ref>{{Cite web

| title = The box model

| author =

| work = MDN Web Docs

| date = 2019-03-23

| access-date = 30 March 2019

| url = https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model

| quote =

}}</ref> The guidelines of the box model are described by web standards [[World Wide Web Consortium|World Wide Web Consortium (W3C)]] specifically the CSS Working Group. For much of late-1990s and early 2000s there had been non-standard compliant implementations of the box model in the mainstream browsers. With the advent of CSS2, which introduced the <code>box-sizing</code> property, the problem had mostly been resolved.

Line 30 ⟶ 28:

:*the <code>margin</code> 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.<ref name="CSS-19990111" /><ref>{{Cite web| url=http://www.w3.org/TR/REC-CSS1-961217#formatting-model | title= Cascading Style Sheets, level 1 | author=Håkon Wium Lie | author-link=Håkon Wium Lie |author2=Bert Bos |author2-link=Bert Bos | date=17 December 1996 | publisher=[[World Wide Web Consortium]] | accessdateaccess-date=2006-12-09}}</ref> Before CSS3, this box model was known as '''W3C box model''', in CSS3, it is known as the <code>content-box</code>.

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

Line 53 ⟶ 51:

| access-date = 30 March 2019

| url = https://quirksmode.org/css/user-interface/boxsizing.html

| quote =

}}</ref>

Line 64 ⟶ 61:

In 1996, CSS<ref>{{cite web |url=https://www.w3.org/TR/CSS1/ |title=Cascading Style Sheets, level 1 |last1=Wium Lie |first1=Håkon |author-link1=Håkon Wium Lie |last2=Bos |first2=Bert |author-link2=Bert Bos |date=17 December 1996 |publisher=[[World Wide Web Consortium]] |access-date=26 October 2017}}</ref> 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.<ref>{{cite web |url=https://www.w3.org/TR/REC-CSS1-961217 |title=Cascading Style Sheets, level 1 |last1=Wium Lie |first1=Håkon |author-link1=Håkon Wium Lie |last2=Bos |first2=Bert |author-link2=Bert Bos |date=17 December 1996 |publisher=[[World Wide Web Consortium]] |access-date=26 October 2017}}</ref> 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 Communicator|Netscape 4.0]] and [[Internet Explorer 4|Internet Explorer 4.0]] both defined width and height as the distance from border to border.<ref>{{cite web |url=https://ppk.home.xs4all.nl/css2tests/box.html |title=Box model tweaking |last=Koch |first=Peter-Paul |publisher=[[XS4ALL]] |accessdateaccess-date=26 October 2017}}</ref> This has been referred to as the ''traditional''<ref name="CSS2 - Box model tweaking">{{cite web |url=https://quirksmode.org/css/user-interface/boxsizing.html |title=CSS - box-sizing |last=Koch |first=Peter-Paul |website=QuirksMode |access-date=26 October 2017}}</ref> or the ''Internet Explorer box model''.<ref name=RJ1>{{cite web |url=http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/ |title=Internet Explorer and the CSS box model |last=Johansson |first=Roger |date=21 December 2006 |website=456 Berea Street |access-date=26 October 2017}}</ref>

[[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.<ref>{{Cite web| url=http://msdn2.microsoft.com/en-us/library/bb250395.aspx#cssenhancements_topic3 | title=CSS Enhancements in Internet Explorer 6 | author=Lance Silver |date=March 2001 | publisher=[[Microsoft]] | work=[[Microsoft Developer Network]] | accessdateaccess-date=2007-06-24}}</ref>

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.<ref>{{Cite book |title=HTML Utopia: Designing Without Tables Using CSS |last=Shafer |first=Dan |year=2005 |publisher=[[Sitepoint]] |___location=Melbourne |isbn=0-9579218-2-9 |pages=[https://archive.org/details/htmlutopia000dans/page/124 124 & Appendix C] |url=https://archive.org/details/htmlutopia000dans/page/124 }}</ref><ref>{{Cite book |title=The Zen of CSS Design |last=Shea |first=David |author-link=Dave Shea (web designer) |author2=Molly E. Holzschlag |author2-link=Molly E. Holzschlag |year=2005 |publisher=Peachpit Press |___location=Berkeley |isbn=0-321-30347-4 |url=https://archive.org/details/zenofcssdesignvi00shea |url-status=dead |df=dmy-all }}</ref> 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 [[Internet Explorer 6|6]] and onward are not affected by the bug if the page contains certain [[HTML]] [[document type declaration]]s. These versions maintain the buggy behavior when in [[quirks mode]] for reasons of backward compatibility.<ref name="msdn IE7 blog">{{Cite web|url=http://msdn2.microsoft.com/en-us/library/bb250496.aspx | title=Cascading Style Sheet Compatibility in Internet Explorer 7 | accessdateaccess-date=2007-06-24 | author=Markus Mielke | date=26 September 2006 | publisher=[[Microsoft]] |work=[[Microsoft Developer Network]] }} "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."</ref> For example, quirks mode is triggered:

* When the [[Document Type Declaration|document type declaration]] is absent or incomplete;

Line 77 ⟶ 74:

* When an HTML&nbsp;4.0 Transitional or Frameset document type declaration is used and a system identifier (URI) is not present;

* When an SGML comment or other unrecognized content appears before the document type declaration

* Internet Explorer&nbsp;6 also uses quirks mode if there is an [[XML]] declaration prior to the document type declaration.<ref>{{Cite web| url=http://msdn.microsoft.com/en-us/library/ms535242(VS.85).aspx | title=!DOCTYPE | accessdateaccess-date=2007-01-13 |publisher=[[Microsoft]]|work=[[Microsoft Developer Network]]}} "The following examples show how to use the !DOCTYPE declaration to specify the DTD a document conforms to, and to switch Internet Explorer&nbsp;6 and later to standards-compliant mode."</ref>

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&nbsp;7, which has had some issues fixed, but not others, causing undesired results in pages using these hacks.<ref name="msdn IE7 blog"/>

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 hack|CSS filter]]s to work around the box model bug in older versions of Internet Explorer.<ref name=RJ1 /><ref>{{Cite web | url=http://virtuelvis.com/archives/2004/02/css-ie-only | title=Hack-free CSS for IE | author=Arve Bersvendsen | date=February 2004 | work=Arve Bersvendsen's weblog | accessdateaccess-date=2007-01-16 | url-status=dead | archiveurlarchive-url=https://web.archive.org/web/20070115183512/http://virtuelvis.com/archives/2004/02/css-ie-only | archivedatearchive-date=15 January 2007 | df=dmy-all }}</ref>

==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.<ref>{{Cite web |url=http://www.vorsprungdurchwebstandards.de/interviews/fallinginlovewithcss/douglas-bowman/ |title=Vorsprung durch Webstandards &#124; Douglas Bowman declares his love to CSS |publisher=Vorsprungdurchwebstandards.de |accessdateaccess-date=2010-07-07 |archive-url=https://web.archive.org/web/20100614070042/http://www.vorsprungdurchwebstandards.de/interviews/fallinginlovewithcss/douglas-bowman/ |archive-date=2010-06-14 |url-status=dead }}</ref> 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.<ref name="CSS2 - Box model tweaking"/> 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.<ref>{{Cite web |url=http://www.vorsprungdurchwebstandards.de/interviews/fallinginlovewithcss/peter-paul-koch/ |title=Vorsprung durch Webstandards &#124; Peter-Paul Koch declares his love to CSS |publisher=Vorsprungdurchwebstandards.de |accessdateaccess-date=2010-07-07 |archive-url=https://web.archive.org/web/20100227061437/http://www.vorsprungdurchwebstandards.de/interviews/fallinginlovewithcss/peter-paul-koch/ |archive-date=2010-02-27 |url-status=dead }}</ref> 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.<ref>{{Cite web |url=http://www.bernzilla.com/item.php?id=33 |title=Box Model Enlightenment, Bernie Zimmermann |publisher=Bernzilla.com |date=4 April 2003 |accessdateaccess-date=2010-07-07 |archive-url=https://web.archive.org/web/20101227135212/http://www.bernzilla.com/item.php?id=33 |archive-date=27 December 2010 |url-status=dead }}</ref>

The W3C has included a "box-sizing" property in CSS3. When <code>box-sizing: border-box;</code> 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".<ref>{{Cite web| url=http://www.w3.org/TR/css3-ui/#box-sizing | title=CSS3 Basic User Interface Module | publisher=[[World Wide Web Consortium]]}}</ref> [[Internet Explorer 8]], [[WebKit]] browsers such as [[Safari (web browser)|Apple Safari]] 5.1+ and [[Google Chrome]], [[Gecko (layout engine)|Gecko-based]] browsers such as [[Mozilla Firefox]] 29.0 and later, [[Opera (web browser)|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 <code>-moz-box-sizing</code> property.<ref>{{Cite web|url=https://developer.mozilla.org/en/CSS/box-sizing |title=-moz-box-sizing |accessdateaccess-date=2009-04-11 |work=[[Mozilla Developer Center]] |publisher=[[Mozilla]]|date=11 April 2009 |quote=It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification. }}</ref> <code>border-box</code> is the default box model used in [[Bootstrap (front-end framework)|Bootstrap framework]].

==References==