Content deleted Content added
m Deduplicate reference |
|||
| (One intermediate revision by one other user not shown) | |||
Line 20:
|editor-first1=Elika J.|editor-last1=Etemad
}}</ref>
| preview =
| preview_date =
| organization = [[World Wide Web Consortium]]
| committee = CSS Working Group
Line 31:
* Anton Prowse<ref name="w3c-level-3-draft-2018-07-06" />
}}
| authors =
| base_standards = [[CSS]]
| related_standards =
| abbreviation =
| ___domain = [[CSS]]
| license =
| website = {{URL|https://www.w3.org/TR/css-box-3/}}
}}
Line 42:
In [[web development]], the '''CSS box model''' refers to how HTML elements are modeled in [[browser engine]]s and how the dimensions of those HTML elements are derived from [[CSS]] properties. It is a fundamental concept for the composition of [[HTML]] webpages.<ref>{{Cite web
| title = CSS
| 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
}}</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 the late-1990s and early 2000s there had been non-standard compliant implementations of the box model in mainstream browsers. With the advent of [[CSS#
==Specifics==
Line 76:
would specify the box dimensions of each block belonging to 'myClass'. Moreover, each such box will have total height 160[[Pixel|px]] and width 260px.
CSS3 introduced the '''Internet Explorer box model''' to the standard, known referred to as <code>border-box</code>.<ref name="CSS2 - Box model tweaking">{{
==History==
Line 93 ⟶ 86:
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]] 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]] | access-date=2007-06-24}}</ref>
Line 101 ⟶ 94:
===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 | access-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;
* When an HTML 3 or earlier document is encountered;
Line 116 ⟶ 108:
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 |access-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]].
==See also==
* [[Layout (computing)]]
==References==
Line 122 ⟶ 117:
==External links==
* [http://www.w3.org/TR/CSS21/box.html The world wide web consortium (W3C) specification of the box model]
* [https://www.w3schools.com/css/css_boxmodel.asp A tutorial on the CSS box model]
* [http://tantek.com/CSS/Examples/boxmodelhack.html Tantek Çelik's description of the "box model hack"]
* [https://web.archive.org/web/20061209090244/http://webdesign.about.com/od/css/a/aaboxmodelhack.htm Getting Internet Explorer to Play Well with CSS] – article on about.com that outlines various ways to get around box model problem and other IE bugs.
| |||