CSS box model: Difference between revisions

Revision as of 22:45, 18 May 2019

Revision as of 16:37, 19 June 2019

Line 83:

==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 |accessdate=2010-07-07 |archive-url=https://web.archive.org/web/20100614070042/http://www.vorsprungdurchwebstandards.de/interviews/fallinginlovewithcss/douglas-bowman/ |archive-date=2010-06-14 |dead-url=yes }}</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 |accessdate=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 |dead-url=yes }}</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 |accessdate=2010-07-07 |archive-url=https://web.archive.org/web/20101227135212/http://www.bernzilla.com/item.php?id=33 |archive-date=27 December 2010 |dead-url=yes }}</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 |accessdate=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]].