Knowledge

CSS box model

Source 📝

1084:, 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 7, which has had some issues fixed, but not others, causing undesired results in pages using these hacks. 952: 283: 181: 604: 344: 79: 38: 960:
the other hand, the HTML width attribute of an image defined the width of the image itself (inside any border). The only element to support padding in those early days was the table cell. Width for the cell was defined as "the suggested width for a cell content in pixels excluding the cell padding."
1104:
Web designer Doug Bowman has said that the original Internet Explorer box model represents a better, more logical approach. 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. He says that this box
959:
Before HTML 4 and CSS, very few HTML elements supported both border and padding, so the definition of the width and height of an element was not very contentious. However, it varied depending on the element. The HTML width attribute of a table defined the width of the table including its border. On
1079:
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
757:
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. Before CSS3,
1105:
model is more useful for graphic designers, who create designs based on the visible width of boxes rather than the width of their content. 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.
1087:
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
1020:, 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 701:—a width and height, and three levels of boxes surrounding it: padding, borders, and margins. While the specification never uses the term "box model" explicitly, the term has become widely used by web developers and web browser vendors. 963:
In 1996, CSS 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. This has since become known as the
1732:"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." 673:
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
997:" 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. 1764:"The following examples show how to use the !DOCTYPE declaration to specify the DTD a document conforms to, and to switch Internet Explorer 6 and later to standards-compliant mode." 2859: 1966: 1831: 1805: 2865: 2655: 100: 93: 1148:
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
17: 2160: 693:
are displayed by graphical browsers. Section 4 of the CSS1 specification defines a "formatting model" that gives block-level elements—such as
2170: 2660: 1924:
It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification.
1954: 2717: 2180: 2853: 2451: 1994: 1775: 2021: 1065:
When an HTML 4.0 Transitional or Frameset document type declaration is used and a system identifier (URI) is not present;
2501: 1835: 245: 143: 2739: 2527: 2165: 1809: 217: 115: 2143: 928:
would specify the box dimensions of each block belonging to 'myClass'. Moreover, each such box will have total height 160
2443: 1580: 2584: 2433: 971:
At the time, very few browser vendors implemented the W3C box model to the letter. The two major browsers at the time,
591: 2254: 1857: 1690: 1656: 318: 264: 224: 162: 122: 65: 2696: 2190: 1237: 2899: 2574: 1157: 1008:
handle the box model or sizing of elements in a web page, which differs from the standard way recommended by the
1606: 2341: 2148: 1401: 231: 202: 198: 129: 51: 2543: 636: 482: 2665: 2548: 2113: 575: 213: 111: 1987: 1747: 1715: 1611: 2461: 570: 565: 979:
both defined width and height as the distance from border to border. This has been referred to as the
2639: 2123: 2081: 2034: 2003: 1887: 1500: 1467: 1434: 1405: 1366: 1311: 1278: 1056: 1044: 1025: 670: 392: 1957:– article on about.com that outlines various ways to get around box model problem and other IE bugs. 608: 2889: 2195: 2049: 1906: 1672: 2894: 2579: 2476: 2471: 2086: 2064: 1969:– Further explanation of the rendering differences between Mozilla Firefox and Internet Explorer. 549: 518: 191: 89: 1274: 2589: 2383: 1980: 1742: 1068:
When an SGML comment or other unrecognized content appears before the document type declaration
1013: 473: 2185: 2138: 2076: 1133: 972: 544: 513: 2269: 2108: 1551: 1333: 1125: 955:
The difference in how width is interpreted between the W3C and Internet Explorer box models
539: 238: 136: 8: 2814: 2806: 2306: 2133: 2091: 1710: 1676: 1648: 1638: 1141: 1117: 1089: 1037: 1017: 976: 1307: 603: 296:
Please help update this article to reflect recent events or newly available information.
2830: 2822: 2745: 2615: 2200: 951: 57: 1116:
the specified width and height, "as commonly implemented by legacy HTML user agents".
2798: 2686: 2681: 2242: 1783: 1686: 1680: 1652: 1005: 1004:
behavior was often considered a bug, because of the way in which earlier versions of
990: 629: 1960: 1488: 1455: 1299: 1266: 2316: 1949: 1211: 1972: 1901: 2594: 2481: 2069: 1944: 1137: 650: 523: 1522: 1388:
The default table width is the space between the current left and right margins.
1081: 2553: 2511: 2296: 2059: 658: 503: 487: 1832:"Vorsprung durch Webstandards | Peter-Paul Koch declares his love to CSS" 1051:
for reasons of backward compatibility. For example, quirks mode is triggered:
744:
is any kind of line (solid, dotted, dashed...) surrounding the box, if present
2883: 2393: 2321: 2311: 2237: 2044: 1806:"Vorsprung durch Webstandards | Douglas Bowman declares his love to CSS" 1129: 1883: 1426: 1358: 1112:
is specified for an element, any padding or border of the element is drawn
622: 1861: 2790: 2722: 2691: 2428: 2279: 2249: 2232: 2029: 1362: 1096:
to work around the box model bug in older versions of Internet Explorer.
1048: 1021: 994: 689:
The Cascading Style Sheets (CSS) specification describes how elements of
669:
webpages. The guidelines of the box model are described by web standards
1496: 730:
describe dimensions of the actual content of the box (text, images, ...)
2775: 2301: 2259: 2222: 2153: 1379: 1939: 2413: 2351: 1752: 1720: 1644: 1616: 1145: 1040:
and onward are not affected by the bug if the page contains certain
180: 78: 2363: 2331: 2291: 2227: 2039: 1492: 1459: 1430: 1303: 1270: 1181: 1093: 690: 451: 343: 1940:
The world wide web consortium (W3C) specification of the box model
737:
describes the space between this content and the border of the box
2750: 2506: 2356: 2118: 1911: 1400:
Raggett, Dave; Le Hors, Arnaud; Jacobs, Ian (24 December 1999).
2780: 2701: 2569: 2491: 2373: 2326: 2264: 2217: 2128: 1526: 1121: 674: 665:
properties. It is a fundamental concept for the composition of
661:
and how the dimensions of those HTML elements are derived from
1463: 1205: 1203: 1071:
Internet Explorer 6 also uses quirks mode if there is an
2496: 2466: 2456: 2418: 2368: 2346: 2336: 2274: 2212: 2207: 2101: 929: 1711:"Cascading Style Sheet Compatibility in Internet Explorer 7" 1545: 1543: 1099: 2486: 2388: 2175: 2096: 1383: 1200: 1108:
The W3C has included a "box-sizing" property in CSS3. When
1041: 704:
All HTML elements can be considered "boxes", this includes
666: 1967:
CSS Box Model differences in Firefox and Internet Explorer
1961:
Cascading Style Sheet Compatibility in Internet Explorer 7
2610: 2423: 2378: 2286: 2054: 1540: 1072: 1009: 716:
tag. Each of those boxes has five modifiable dimensions:
662: 440: 430: 1671: 1080:
these workarounds is the "box model hack" developed by
1062:
When an HTML 3 or earlier document is encountered;
1298: 1047:. These versions maintain the buggy behavior when in 1402:"13 Objects, Images, and Applets § Width and height" 1399: 1275:"Cascading Style Sheets, level 1 § Formatting model" 2002: 1075:
declaration prior to the document type declaration.
205:. Unsourced material may be challenged and removed. 1950:Tantek Çelik's description of the "box model hack" 2881: 1773: 1704: 1702: 681:property, the problem had mostly been resolved. 1955:Getting Internet Explorer to Play Well with CSS 1834:. Vorsprungdurchwebstandards.de. Archived from 1808:. Vorsprungdurchwebstandards.de. Archived from 1640:HTML Utopia: Designing Without Tables Using CSS 1331: 1028:is not affected by this non-standard behavior. 1261: 1259: 1210:Bos, Bert; Prowse, Anton, eds. (6 July 2018). 797:. Similarly, the total height of a box equals 1988: 1860:. Bernzilla.com. 4 April 2003. Archived from 1708: 1699: 1175: 1173: 630: 1858:"Box Model Enlightenment, Bernie Zimmermann" 1604: 1487: 1454: 1265: 1256: 657:refers to how HTML elements are modeled in 66:Learn how and when to remove these messages 1995: 1981: 1180:Etemad, Elika J., ed. (22 December 2020). 1170: 637: 623: 342: 1607:"CSS Enhancements in Internet Explorer 6" 1581:"Internet Explorer and the CSS box model" 1578: 1209: 1100:Support for Internet Explorer's box model 319:Learn how and when to remove this message 265:Learn how and when to remove this message 163:Learn how and when to remove this message 950: 2854:International World Wide Web Conference 1425: 1357: 14: 2882: 1636: 1574: 1572: 1179: 939:to the standard, known referred to as 769:The total width of a box is therefore 99:Please improve this article by adding 1976: 1579:Johansson, Roger (21 December 2006). 367:W3C Candidate Recommendation Snapshot 2528:Web Content Accessibility Guidelines 828:For example, the following CSS code 276: 203:adding citations to reliable sources 174: 72: 31: 1709:Markus Mielke (26 September 2006). 1569: 24: 1884:"CSS3 Basic User Interface Module" 1774:Arve Bersvendsen (February 2004). 1431:"HTML 3.2 Reference Specification" 25: 2911: 1933: 1497:"Cascading Style Sheets, level 1" 1464:"Cascading Style Sheets, level 1" 1308:"Cascading Style Sheets, level 1" 1218:. 31 July 2018. CSS Working Group 1156:is the default box model used in 47:This article has multiple issues. 1549: 1520: 602: 281: 179: 77: 36: 2751:Multimodal Interaction Activity 2711:Community & business groups 1945:A tutorial on the CSS box model 1894: 1876: 1850: 1824: 1798: 1767: 1735: 1665: 1630: 1598: 1514: 1481: 1448: 671:World Wide Web Consortium (W3C) 190:needs additional citations for 55:or discuss these issues on the 27:Model used for styling websites 18:Internet Explorer box model bug 1419: 1393: 1351: 1325: 1292: 1230: 1182:"CSS Box Model Module Level 3" 1031: 762:, in CSS3, it is known as the 751:is the space around the border 677:in 1998, which introduced the 13: 1: 1212:"CSS Basic Box Model Level 3" 1163: 101:secondary or tertiary sources 2549:Web Accessibility Initiative 1685:. Berkeley: Peachpit Press. 1188:. Level 3. CSS Working Group 758:this box model was known as 684: 358:CSS Box Model Module Level 3 337:CSS Box Model Module Level 3 7: 2834:(browser/editor, 1996–2012) 1748:Microsoft Developer Network 1716:Microsoft Developer Network 1612:Microsoft Developer Network 1605:Lance Silver (March 2001). 1036:Internet Explorer versions 1002:Internet Explorer box model 985:Internet Explorer box model 937:Internet Explorer box model 377:December 22, 2020 10: 2916: 1963:– MSDN article, July 2006. 1045:document type declarations 946: 2846: 2789: 2771: 2764: 2732: 2710: 2674: 2648: 2640:World Wide Web Foundation 2635: 2628: 2603: 2562: 2544:Markup Validation Service 2536: 2520: 2442: 2406: 2124:Linked Data Notifications 2020: 2011: 2004:World Wide Web Consortium 1888:World Wide Web Consortium 1780:Arve Bersvendsen's weblog 1501:World Wide Web Consortium 1468:World Wide Web Consortium 1435:World Wide Web Consortium 1406:World Wide Web Consortium 1367:World Wide Web Consortium 1312:World Wide Web Consortium 1279:World Wide Web Consortium 1057:document type declaration 1026:Internet Explorer for Mac 446: 436: 426: 406: 398: 393:World Wide Web Consortium 388: 371: 363: 353: 341: 336: 290:This article needs to be 1907:Mozilla Developer Center 1332:Peter-Paul Koch (2013). 1059:is absent or incomplete; 830: 357: 1363:"The HTML3 Table Model" 1110:box-sizing: border-box; 2900:Cascading Style Sheets 1776:"Hack-free CSS for IE" 1380:"RFC 1942 HTML Tables" 1014:Cascading Style Sheets 956: 610:Cascading Style Sheets 474:Cascading Style Sheets 88:relies excessively on 1682:The Zen of CSS Design 977:Internet Explorer 4.0 954: 1649:124 & Appendix C 1637:Shafer, Dan (2005). 1523:"Box model tweaking" 1495:(17 December 1996). 1462:(17 December 1996). 1306:(17 December 1996). 935:CSS3 introduced the 592:Stylesheet languages 199:improve this article 1864:on 27 December 2010 1838:on 27 February 2010 1677:Molly E. Holzschlag 1429:(14 January 1997). 1361:(23 January 1996). 1273:(11 January 1999). 1158:Bootstrap framework 1144:7.0 and later, and 1118:Internet Explorer 8 1090:conditional comment 1018:Internet Explorer 6 333: 2860:Steering Committee 2740:Device Description 2718:Web Advertising BG 1786:on 15 January 2007 1552:"CSS – box-sizing" 1550:Koch, Peter-Paul. 1521:Koch, Peter-Paul. 1334:"CSS – box-sizing" 957: 331: 2877: 2876: 2842: 2841: 2760: 2759: 2624: 2623: 1902:"-moz-box-sizing" 1136:browsers such as 1124:browsers such as 1006:Internet Explorer 991:Internet Explorer 932:and width 260px. 647: 646: 514:image replacement 468: 467: 402:CSS Working Group 348:The CSS box model 329: 328: 321: 311: 310: 275: 274: 267: 249: 173: 172: 165: 147: 70: 16:(Redirected from 2907: 2866:First conference 2835: 2827: 2819: 2811: 2803: 2769: 2768: 2633: 2632: 2616:XHTML+MathML+SVG 2035:Activity Streams 2018: 2017: 1997: 1990: 1983: 1974: 1973: 1927: 1926: 1921: 1919: 1898: 1892: 1891: 1880: 1874: 1873: 1871: 1869: 1854: 1848: 1847: 1845: 1843: 1828: 1822: 1821: 1819: 1817: 1802: 1796: 1795: 1793: 1791: 1782:. Archived from 1771: 1765: 1763: 1761: 1759: 1739: 1733: 1731: 1729: 1727: 1706: 1697: 1696: 1669: 1663: 1662: 1634: 1628: 1627: 1625: 1623: 1602: 1596: 1595: 1593: 1591: 1585:456 Berea Street 1576: 1567: 1566: 1564: 1562: 1547: 1538: 1537: 1535: 1533: 1518: 1512: 1511: 1509: 1507: 1485: 1479: 1478: 1476: 1474: 1452: 1446: 1445: 1443: 1441: 1423: 1417: 1416: 1414: 1412: 1397: 1391: 1390: 1377: 1375: 1373: 1355: 1349: 1348: 1346: 1344: 1329: 1323: 1322: 1320: 1318: 1296: 1290: 1289: 1287: 1285: 1263: 1254: 1253: 1251: 1249: 1234: 1228: 1227: 1225: 1223: 1207: 1198: 1197: 1195: 1193: 1177: 1155: 1151: 1140:29.0 and later, 1111: 1016:language. As of 942: 924: 921: 918: 915: 912: 909: 906: 903: 900: 897: 894: 891: 888: 885: 882: 879: 876: 873: 870: 867: 864: 861: 858: 855: 852: 849: 846: 843: 840: 837: 834: 824: 820: 816: 812: 808: 804: 800: 796: 792: 788: 784: 780: 776: 772: 765: 750: 743: 736: 729: 725: 715: 711: 707: 700: 696: 680: 639: 632: 625: 611: 606: 470: 469: 464: 461: 459: 457: 455: 453: 384: 382: 346: 334: 330: 324: 317: 306: 303: 297: 285: 284: 277: 270: 263: 259: 256: 250: 248: 207: 183: 175: 168: 161: 157: 154: 148: 146: 105: 81: 73: 62: 40: 39: 32: 21: 2915: 2914: 2910: 2909: 2908: 2906: 2905: 2904: 2890:Web development 2880: 2879: 2878: 2873: 2838: 2833: 2825: 2817: 2809: 2801: 2785: 2756: 2728: 2706: 2670: 2644: 2620: 2599: 2558: 2532: 2516: 2482:SMIL Timesheets 2438: 2402: 2307:Information Set 2092:Geolocation API 2022:Recommendations 2013: 2007: 2001: 1936: 1931: 1930: 1917: 1915: 1914:. 11 April 2009 1900: 1899: 1895: 1882: 1881: 1877: 1867: 1865: 1856: 1855: 1851: 1841: 1839: 1830: 1829: 1825: 1815: 1813: 1812:on 14 June 2010 1804: 1803: 1799: 1789: 1787: 1772: 1768: 1757: 1755: 1741: 1740: 1736: 1725: 1723: 1707: 1700: 1693: 1670: 1666: 1659: 1635: 1631: 1621: 1619: 1603: 1599: 1589: 1587: 1577: 1570: 1560: 1558: 1548: 1541: 1531: 1529: 1519: 1515: 1505: 1503: 1489:Wium Lie, Håkon 1486: 1482: 1472: 1470: 1456:Wium Lie, Håkon 1453: 1449: 1439: 1437: 1424: 1420: 1410: 1408: 1398: 1394: 1378: 1371: 1369: 1356: 1352: 1342: 1340: 1330: 1326: 1316: 1314: 1297: 1293: 1283: 1281: 1267:Wium Lie, Håkon 1264: 1257: 1247: 1245: 1244:. 23 March 2019 1236: 1235: 1231: 1221: 1219: 1208: 1201: 1191: 1189: 1178: 1171: 1166: 1153: 1150:-moz-box-sizing 1149: 1138:Mozilla Firefox 1109: 1102: 1034: 949: 940: 926: 925: 922: 919: 916: 913: 910: 907: 904: 901: 898: 895: 892: 889: 886: 883: 880: 877: 874: 871: 868: 865: 862: 859: 856: 853: 850: 847: 844: 841: 838: 835: 832: 822: 818: 814: 810: 806: 802: 798: 794: 790: 786: 782: 778: 774: 770: 763: 748: 741: 734: 727: 723: 713: 709: 705: 698: 694: 687: 678: 659:browser engines 651:web development 643: 609: 450: 422: 413:Elika J. Etemad 380: 378: 376: 359: 349: 325: 314: 313: 312: 307: 301: 298: 295: 286: 282: 271: 260: 254: 251: 214:"CSS box model" 208: 206: 196: 184: 169: 158: 152: 149: 112:"CSS box model" 106: 104: 98: 94:primary sources 82: 41: 37: 28: 23: 22: 15: 12: 11: 5: 2913: 2903: 2902: 2897: 2895:CSS frameworks 2892: 2875: 2874: 2872: 2871: 2870: 2869: 2868:("WWW1", 1994) 2863: 2850: 2848: 2844: 2843: 2840: 2839: 2837: 2836: 2828: 2820: 2812: 2804: 2795: 2793: 2787: 2786: 2784: 2783: 2778: 2772: 2766: 2762: 2761: 2758: 2757: 2755: 2754: 2748: 2743: 2736: 2734: 2730: 2729: 2727: 2726: 2720: 2714: 2712: 2708: 2707: 2705: 2704: 2699: 2694: 2689: 2684: 2678: 2676: 2675:Working groups 2672: 2671: 2669: 2668: 2663: 2658: 2652: 2650: 2649:Elected groups 2646: 2645: 2643: 2642: 2636: 2630: 2626: 2625: 2622: 2621: 2619: 2618: 2613: 2607: 2605: 2601: 2600: 2598: 2597: 2592: 2587: 2582: 2577: 2572: 2566: 2564: 2560: 2559: 2557: 2556: 2554:Web Components 2551: 2546: 2540: 2538: 2534: 2533: 2531: 2530: 2524: 2522: 2518: 2517: 2515: 2514: 2512:XMLHttpRequest 2509: 2504: 2499: 2494: 2489: 2484: 2479: 2474: 2469: 2464: 2459: 2454: 2448: 2446: 2444:Working drafts 2440: 2439: 2437: 2436: 2431: 2426: 2421: 2416: 2410: 2408: 2404: 2403: 2401: 2400: 2399: 2398: 2397: 2396: 2386: 2381: 2376: 2371: 2366: 2361: 2360: 2359: 2354: 2344: 2339: 2334: 2329: 2324: 2319: 2314: 2309: 2304: 2299: 2294: 2284: 2283: 2282: 2272: 2267: 2262: 2257: 2252: 2247: 2246: 2245: 2235: 2230: 2225: 2220: 2215: 2210: 2205: 2204: 2203: 2201:Filter Effects 2193: 2188: 2183: 2178: 2173: 2168: 2163: 2158: 2157: 2156: 2146: 2141: 2136: 2131: 2126: 2121: 2116: 2111: 2106: 2105: 2104: 2094: 2089: 2084: 2079: 2074: 2073: 2072: 2067: 2062: 2052: 2047: 2042: 2037: 2032: 2026: 2024: 2015: 2009: 2008: 2000: 1999: 1992: 1985: 1977: 1971: 1970: 1964: 1958: 1952: 1947: 1942: 1935: 1934:External links 1932: 1929: 1928: 1893: 1875: 1849: 1823: 1797: 1766: 1734: 1698: 1691: 1664: 1657: 1629: 1597: 1568: 1539: 1513: 1480: 1447: 1418: 1392: 1350: 1338:quirksmode.org 1324: 1300:Håkon Wium Lie 1291: 1255: 1229: 1199: 1168: 1167: 1165: 1162: 1101: 1098: 1077: 1076: 1069: 1066: 1063: 1060: 1033: 1030: 948: 945: 831: 815:bottom-padding 755: 754: 753: 752: 745: 738: 731: 686: 683: 645: 644: 642: 641: 634: 627: 619: 616: 615: 614: 613: 597: 596: 595: 594: 586: 585: 581: 580: 579: 578: 573: 568: 560: 559: 555: 554: 553: 552: 547: 542: 534: 533: 529: 528: 527: 526: 521: 516: 511: 506: 498: 497: 493: 492: 491: 490: 488:CSS Zen Garden 485: 477: 476: 466: 465: 448: 444: 443: 438: 434: 433: 428: 427:Base standards 424: 423: 421: 420: 417: 414: 410: 408: 404: 403: 400: 396: 395: 390: 386: 385: 373: 372:Latest version 369: 368: 365: 361: 360: 355: 351: 350: 347: 339: 338: 327: 326: 309: 308: 289: 287: 280: 273: 272: 255:September 2017 187: 185: 178: 171: 170: 153:September 2017 85: 83: 76: 71: 45: 44: 42: 35: 26: 9: 6: 4: 3: 2: 2912: 2901: 2898: 2896: 2893: 2891: 2888: 2887: 2885: 2867: 2864: 2861: 2858: 2857: 2855: 2852: 2851: 2849: 2845: 2832: 2829: 2824: 2821: 2816: 2813: 2808: 2805: 2800: 2797: 2796: 2794: 2792: 2788: 2782: 2779: 2777: 2774: 2773: 2770: 2767: 2763: 2752: 2749: 2747: 2744: 2741: 2738: 2737: 2735: 2733:Closed groups 2731: 2724: 2721: 2719: 2716: 2715: 2713: 2709: 2703: 2700: 2698: 2695: 2693: 2690: 2688: 2685: 2683: 2680: 2679: 2677: 2673: 2667: 2664: 2662: 2659: 2657: 2654: 2653: 2651: 2647: 2641: 2638: 2637: 2634: 2631: 2629:Organizations 2627: 2617: 2614: 2612: 2609: 2608: 2606: 2602: 2596: 2593: 2591: 2588: 2586: 2583: 2581: 2578: 2576: 2573: 2571: 2568: 2567: 2565: 2561: 2555: 2552: 2550: 2547: 2545: 2542: 2541: 2539: 2535: 2529: 2526: 2525: 2523: 2519: 2513: 2510: 2508: 2505: 2503: 2500: 2498: 2495: 2493: 2490: 2488: 2485: 2483: 2480: 2478: 2475: 2473: 2470: 2468: 2465: 2463: 2460: 2458: 2455: 2453: 2450: 2449: 2447: 2445: 2441: 2435: 2432: 2430: 2427: 2425: 2422: 2420: 2417: 2415: 2412: 2411: 2409: 2405: 2395: 2392: 2391: 2390: 2387: 2385: 2382: 2380: 2377: 2375: 2372: 2370: 2367: 2365: 2362: 2358: 2355: 2353: 2350: 2349: 2348: 2345: 2343: 2340: 2338: 2335: 2333: 2330: 2328: 2325: 2323: 2320: 2318: 2315: 2313: 2310: 2308: 2305: 2303: 2300: 2298: 2295: 2293: 2290: 2289: 2288: 2285: 2281: 2278: 2277: 2276: 2273: 2271: 2268: 2266: 2263: 2261: 2258: 2256: 2253: 2251: 2248: 2244: 2241: 2240: 2239: 2236: 2234: 2231: 2229: 2226: 2224: 2221: 2219: 2216: 2214: 2211: 2209: 2206: 2202: 2199: 2198: 2197: 2194: 2192: 2189: 2187: 2184: 2182: 2179: 2177: 2174: 2172: 2169: 2167: 2164: 2162: 2159: 2155: 2152: 2151: 2150: 2147: 2145: 2142: 2140: 2137: 2135: 2132: 2130: 2127: 2125: 2122: 2120: 2117: 2115: 2112: 2110: 2107: 2103: 2100: 2099: 2098: 2095: 2093: 2090: 2088: 2085: 2083: 2080: 2078: 2075: 2071: 2068: 2066: 2063: 2061: 2058: 2057: 2056: 2053: 2051: 2048: 2046: 2045:Canonical XML 2043: 2041: 2038: 2036: 2033: 2031: 2028: 2027: 2025: 2023: 2019: 2016: 2010: 2005: 1998: 1993: 1991: 1986: 1984: 1979: 1978: 1975: 1968: 1965: 1962: 1959: 1956: 1953: 1951: 1948: 1946: 1943: 1941: 1938: 1937: 1925: 1913: 1909: 1908: 1903: 1897: 1889: 1885: 1879: 1863: 1859: 1853: 1837: 1833: 1827: 1811: 1807: 1801: 1785: 1781: 1777: 1770: 1754: 1750: 1749: 1744: 1738: 1722: 1718: 1717: 1712: 1705: 1703: 1694: 1692:0-321-30347-4 1688: 1684: 1683: 1678: 1674: 1668: 1660: 1658:0-9579218-2-9 1654: 1650: 1646: 1643:. Melbourne: 1642: 1641: 1633: 1618: 1614: 1613: 1608: 1601: 1586: 1582: 1575: 1573: 1557: 1553: 1546: 1544: 1528: 1524: 1517: 1502: 1498: 1494: 1490: 1484: 1469: 1465: 1461: 1457: 1451: 1436: 1432: 1428: 1427:Raggett, Dave 1422: 1407: 1403: 1396: 1389: 1385: 1381: 1368: 1364: 1360: 1359:Raggett, Dave 1354: 1339: 1335: 1328: 1313: 1309: 1305: 1301: 1295: 1280: 1276: 1272: 1268: 1262: 1260: 1243: 1239: 1233: 1217: 1213: 1206: 1204: 1187: 1183: 1176: 1174: 1169: 1161: 1159: 1147: 1143: 1139: 1135: 1131: 1130:Google Chrome 1127: 1123: 1119: 1115: 1106: 1097: 1095: 1091: 1085: 1083: 1074: 1070: 1067: 1064: 1061: 1058: 1054: 1053: 1052: 1050: 1046: 1043: 1039: 1029: 1027: 1023: 1019: 1015: 1011: 1007: 1003: 998: 996: 992: 988: 986: 982: 978: 974: 969: 967: 966:W3C box model 961: 953: 944: 938: 933: 931: 829: 826: 823:bottom-margin 819:bottom-border 787:right-padding 767: 761: 760:W3C box model 746: 739: 732: 721: 720: 719: 718: 717: 702: 692: 682: 676: 672: 668: 664: 660: 656: 655:CSS box model 652: 640: 635: 633: 628: 626: 621: 620: 618: 617: 612: 605: 601: 600: 599: 598: 593: 590: 589: 588: 587: 583: 582: 577: 574: 572: 569: 567: 564: 563: 562: 561: 557: 556: 551: 548: 546: 543: 541: 538: 537: 536: 535: 531: 530: 525: 522: 520: 517: 515: 512: 510: 507: 505: 502: 501: 500: 499: 495: 494: 489: 486: 484: 481: 480: 479: 478: 475: 472: 471: 463: 449: 445: 442: 439: 435: 432: 429: 425: 418: 415: 412: 411: 409: 405: 401: 397: 394: 391: 387: 374: 370: 366: 362: 356: 352: 345: 340: 335: 323: 320: 305: 293: 288: 279: 278: 269: 266: 258: 247: 244: 240: 237: 233: 230: 226: 223: 219: 216: –  215: 211: 210:Find sources: 204: 200: 194: 193: 188:This article 186: 182: 177: 176: 167: 164: 156: 145: 142: 138: 135: 131: 128: 124: 121: 117: 114: –  113: 109: 108:Find sources: 102: 96: 95: 91: 86:This article 84: 80: 75: 74: 69: 67: 60: 59: 54: 53: 48: 43: 34: 33: 30: 19: 2012:Products and 1923: 1916:. Retrieved 1905: 1896: 1878: 1866:. Retrieved 1862:the original 1852: 1840:. Retrieved 1836:the original 1826: 1814:. Retrieved 1810:the original 1800: 1788:. Retrieved 1784:the original 1779: 1769: 1756:. Retrieved 1746: 1737: 1724:. Retrieved 1714: 1681: 1667: 1639: 1632: 1620:. Retrieved 1610: 1600: 1588:. Retrieved 1584: 1559:. Retrieved 1555: 1530:. Retrieved 1516: 1504:. Retrieved 1483: 1471:. Retrieved 1450: 1438:. Retrieved 1421: 1409:. Retrieved 1395: 1387: 1370:. Retrieved 1353: 1341:. Retrieved 1337: 1327: 1315:. Retrieved 1294: 1282:. Retrieved 1246:. Retrieved 1242:MDN Web Docs 1241: 1232: 1220:. Retrieved 1215: 1190:. Retrieved 1185: 1126:Apple Safari 1113: 1107: 1103: 1086: 1082:Tantek Çelik 1078: 1035: 1001: 999: 989: 984: 980: 973:Netscape 4.0 970: 965: 962: 958: 936: 934: 927: 827: 795:right-margin 791:right-border 779:left-padding 768: 759: 756: 703: 688: 654: 648: 550:"Holy grail" 532:Philosophies 508: 419:Anton Prowse 389:Organization 315: 302:October 2017 299: 291: 261: 252: 242: 235: 228: 221: 209: 197:Please help 192:verification 189: 159: 150: 140: 133: 126: 119: 107: 87: 63: 56: 50: 49:Please help 46: 29: 2847:Conferences 2723:WebAssembly 2692:WebAssembly 2595:WebPlatform 2250:Web storage 2233:WebAssembly 2030:ActivityPub 1673:Shea, David 1647:. pp.  1134:Gecko-based 1094:CSS filters 1049:quirks mode 1032:Workarounds 1022:quirks mode 995:quirks mode 981:traditional 807:top-padding 775:left-border 771:left-margin 764:content-box 584:Comparisons 483:Style sheet 354:Native name 2884:Categories 2776:CERN httpd 2563:Deprecated 2537:Initiative 2521:Guidelines 2429:XHTML+SMIL 2297:Encryption 2260:Webmention 2223:Timed text 2060:Animations 1790:16 January 1758:13 January 1743:"!DOCTYPE" 1590:26 October 1561:26 October 1556:QuirksMode 1532:26 October 1506:26 October 1473:26 October 1440:26 October 1411:26 October 1372:26 October 1317:9 December 1284:26 October 1164:References 1154:border-box 1152:property. 941:border-box 803:top-border 799:top-margin 699:blockquote 679:box-sizing 545:Responsive 504:animations 460:/css-box-3 381:2020-12-22 225:newspapers 123:newspapers 90:references 52:improve it 2826:(1994–97) 2818:(1994–97) 2810:(1993–98) 2799:Line Mode 2604:Obsoleted 2414:IndieAuth 2322:Signature 2312:Namespace 2109:IndexedDB 2087:EmotionML 2014:standards 1753:Microsoft 1721:Microsoft 1645:Sitepoint 1617:Microsoft 1493:Bos, Bert 1460:Bos, Bert 1271:Bos, Bert 1146:Konqueror 1128:5.1+ and 1055:When the 691:web pages 685:Specifics 540:Tableless 509:box model 399:Committee 332:Box Model 58:talk page 2791:Browsers 2765:Software 2697:WebAuthn 2394:elements 2364:XPointer 2332:XInclude 2228:VoiceXML 2134:Micropub 1918:11 April 1679:(2005). 1343:30 March 1304:Bert Bos 1248:30 March 1012:for the 712:tag, or 496:Concepts 416:Bert Bos 2862:(IW3C2) 2856:(IW3C) 2802:(1990–) 2507:XFrames 2119:JSON-LD 2065:Flexbox 1912:Mozilla 1726:24 June 1622:24 June 1222:9 April 1192:9 April 1092:and/or 983:or the 947:History 872:padding 836:myClass 735:padding 519:flexbox 447:Website 407:Editors 379: ( 375:Level 3 292:updated 239:scholar 137:scholar 2781:Libwww 2742:(DDWG) 2702:WHATWG 2570:C-HTML 2492:WebGPU 2384:XSL-FO 2374:XQuery 2327:XForms 2317:Schema 2302:Events 2265:WebSub 2218:SPARQL 2154:Schema 2129:MathML 1868:7 July 1842:7 July 1816:7 July 1689:  1655:  1527:XS4ALL 1122:WebKit 1114:inside 908:margin 887:border 857:height 811:height 749:margin 742:border 724:height 653:, the 607:  576:Stylus 437:Domain 364:Status 241:  234:  227:  220:  212:  139:  132:  125:  118:  110:  2831:Amaya 2815:Agora 2807:Arena 2753:(MMI) 2661:Board 2497:WebXR 2467:InkML 2457:CURIE 2452:CCXML 2419:XAdES 2407:Notes 2369:XProc 2347:XPath 2337:XLink 2280:+RDFa 2275:XHTML 2213:SHACL 2208:SCXML 2102:HTML5 2006:(W3C) 1238:"CSS" 1142:Opera 902:black 893:solid 842:width 783:width 728:width 708:tag, 558:Tools 246:JSTOR 232:books 144:JSTOR 130:books 2823:Argo 2746:HTML 2585:PGML 2580:JSSS 2575:HDML 2502:XFDL 2487:sXBL 2389:XSLT 2292:Base 2270:WOFF 2255:WSDL 2191:SSML 2181:SRGS 2176:SOAP 2171:SMIL 2166:SKOS 2161:SISR 2097:HTML 2070:Grid 2040:ARIA 1920:2009 1870:2010 1844:2010 1818:2010 1792:2007 1760:2007 1728:2007 1687:ISBN 1653:ISBN 1624:2007 1592:2017 1563:2017 1534:2017 1508:2017 1475:2017 1442:2017 1413:2017 1384:IETF 1374:2017 1345:2019 1319:2006 1286:2017 1250:2019 1224:2021 1194:2021 1042:HTML 1000:The 993:in " 975:and 747:the 740:the 733:the 726:and 722:the 697:and 675:CSS2 667:HTML 571:Less 566:Sass 524:grid 456:.org 218:news 116:news 2687:SVG 2682:CSS 2666:TAG 2611:P3P 2590:VML 2477:RIF 2472:MSE 2462:EME 2434:XUP 2424:XBL 2379:XSL 2357:3.x 2352:2.0 2342:XOP 2287:XML 2238:WoT 2196:SVG 2186:SRI 2149:RDF 2144:PLS 2139:OWL 2114:ITS 2082:EXI 2077:DOM 2055:CSS 2050:CDF 1216:W3C 1186:W3C 1073:XML 1024:). 1010:W3C 863:100 848:200 706:div 663:CSS 649:In 458:/TR 454:.w3 452:www 441:CSS 431:CSS 201:by 92:to 2886:: 2725:CG 2656:AB 2243:TD 1922:. 1910:. 1904:. 1886:. 1778:. 1751:. 1745:. 1719:. 1713:. 1701:^ 1675:; 1651:. 1615:. 1609:. 1583:. 1571:^ 1554:. 1542:^ 1525:. 1499:. 1491:; 1466:. 1458:; 1433:. 1404:. 1386:. 1382:. 1365:. 1336:. 1310:. 1302:; 1277:. 1269:; 1258:^ 1240:. 1214:. 1202:^ 1184:. 1172:^ 1160:. 1132:, 1120:, 987:. 968:. 943:. 930:px 917:px 914:10 899:px 896:10 881:px 878:10 866:px 851:px 825:. 821:+ 817:+ 813:+ 809:+ 805:+ 801:+ 793:+ 789:+ 785:+ 781:+ 777:+ 773:+ 766:. 103:. 61:. 1996:e 1989:t 1982:v 1890:. 1872:. 1846:. 1820:. 1794:. 1762:. 1730:. 1695:. 1661:. 1626:. 1594:. 1565:. 1536:. 1510:. 1477:. 1444:. 1415:. 1376:. 1347:. 1321:. 1288:. 1252:. 1226:. 1196:. 1038:6 923:} 920:; 911:: 905:; 890:: 884:; 875:: 869:; 860:: 854:; 845:: 839:{ 833:. 714:a 710:p 695:p 638:e 631:t 624:v 462:/ 383:) 322:) 316:( 304:) 300:( 294:. 268:) 262:( 257:) 253:( 243:· 236:· 229:· 222:· 195:. 166:) 160:( 155:) 151:( 141:· 134:· 127:· 120:· 97:. 68:) 64:( 20:)

Index

Internet Explorer box model bug
improve it
talk page
Learn how and when to remove these messages

references
primary sources
secondary or tertiary sources
"CSS box model"
news
newspapers
books
scholar
JSTOR
Learn how and when to remove this message

verification
improve this article
adding citations to reliable sources
"CSS box model"
news
newspapers
books
scholar
JSTOR
Learn how and when to remove this message
Learn how and when to remove this message

World Wide Web Consortium
CSS

Text is available under the Creative Commons Attribution-ShareAlike License. Additional terms may apply.