CSS box model: Difference between revisions

Revision as of 17:30, 11 May 2020

Revision as of 09:58, 31 July 2020

Line 32:

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]] |author2=[[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>widthheight</code> + <code>bottom-padding</code> + <code>bottom-border</code> + <code>bottom-margin</code>.

For example, the following CSS code