CSS box model: Difference between revisions

Revision as of 22:24, 30 March 2019

Revision as of 22:43, 30 March 2019

Line 14:

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 consider "boxes", this include DIV<code>div</code> tag, P<code>p</code> tag, andor A<code>a</code> tag. Each of those boxes has five parametersmodifiable dimensions:

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

:*the <code>padding</code> describes the space between this content and the border of the box

:*the <code>border</code> is any kind of line (solid, dotted, dashed...) surrounding the box, if present

:*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]] |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 the<code>left-margin</code> width+ of<code>left-border</code> the+ content,<code>left-padding</code> plus+ (left<code>width</code> and+ <code>right) -padding,</code> plus (left and+ <code>right) -border,</code> plus (left and+ <code>right) -margin</code>. Similarly, the total height of a box equals the<code>top-margin</code> height+ of<code>top-border</code> the+ content,<code>top-padding</code> plus+ (top<code>width</code> and+ <code>bottom) -padding,</code> plus (top and+ <code>bottom) -border,</code> plus (top and+ <code>bottom) -margin</code>.

For example, the following CSS code

Line 36:

</source>

would specify the box dimensions of each block belonging to 'myClass'. Moreover, each such box will have total height 160[[Pixel|px]] and width 260px.

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

==History==