CSS box model: Difference between revisions

Revision as of 22:39, 7 April 2018

Revision as of 09:34, 4 February 2019

Line 11:

==Specifics==

[[File:W3C and Internet Explorer box models.svg|thumb|300px|The difference in how width is interpreted between the W3C and Internet Explorer box models]]

The content of eachEach box is determined byhas fourfive parameters:

:*the height/width describesand width thedescribe dimensions of the actual content of the box (text, images, ...)

:*the padding describes the space between this content and the border of the box

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

:*the margin is the space around the border

The total width of a box is therefore the width of the content, plus (left- and right-) padding, plus (left- and right-) border, plus (left- and right-) margin. Similarly, the total height of a box equals the height of the content, plus (top- and bottom-) padding, plus (top- and bottom-) border, plus (top- and bottom-) margin.

For example, the following CSS code

Line 29 ⟶ 30:

}

</source>

willwould specify the box dimensions of each block belonging to 'myClass'. Moreover, each such box will have total height 160[[Pixel|px]] and width 260px, which is the sum of the content, padding, border and margin.

==Bugs==