CSS box model: Difference between revisions

Revision as of 16:01, 14 July 2023

Revision as of 16:01, 14 July 2023

Line 77:

CSS3 introduced the '''Internet Explorer box model''' to the standard, known referred to as <code>border-box</code>.<ref>{{Cite web

| title = CSS -– box-sizing

| author = Peter-Paul Koch

| work = quirksmode.org

Line 93:

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]] |access-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]] | access-date=2007-06-24}}</ref>

Line 125:

*[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.

* [http://msdn2.microsoft.com/en-us/library/Bb250496 Cascading Style Sheet Compatibility in Internet Explorer 7] -– MSDN article, July 2006.

* [https://web.archive.org/web/20100103111556/http://renownedmedia.com/blog/css-box-model-differences-in-firefox-and-internet-explorer/ CSS Box Model differences in Firefox and Internet Explorer] -– Further explanation of the rendering differences between Mozilla Firefox and Internet Explorer.

{{W3C Standards}}