CSS box model: Difference between revisions

Revision as of 09:58, 31 July 2020

Revision as of 21:15, 21 December 2020

Line 1:

{{Use dmy dates|date=July 2019}}

{{multiple issues|

{{nomore footnotes|date=September 2017}}

{{primary sources|date=September 2017}}

{{more citations needed|date=September 2017}}

Line 21:

==Specifics==

The Cascading Style Sheets (CSS) specification describes how elements of [[web page]]s are displayed by graphical browsers. Section 4 of the CSS1 specification defines a "formatting model" that gives block-level elements—such as <code>p</code> and <code>blockquote</code>—a width and height, and three levels of boxes surrounding it: padding, borders, and margins.<ref name="CSS-19990111">{{cite web |url=https://www.w3.org/TR/1999/REC-CSS1-19990111#formatting-model |title=Cascading Style Sheets, level 1 § Formatting model |last1=Wium Lie |first1=Håkon |author-link1=Håkon Wium Lie |last2=Bos |first2=Bert |author-link2=Bert Bos |date=11 January 1999 |publisher=[[World Wide Web Consortium]] |access-date=26 October 2017}}</ref> While the specification never uses the term "[[CSS box model|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 <code>div</code> tag, <code>p</code> tag, or <code>a</code> tag. Each of those boxes has five modifiable dimensions:

:*the <code>height</code> and <code>width</code> describe dimensions of the actual content of the box (text, images, ...)

Line 30:

:*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]] | accessdate=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 68:

[[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]] | accessdate=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 [[CSS box model|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 |authorlinkauthor-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===