This is a sampler of text displaying the components of the box model. The areas within this model are "content", "padding", "border" and "margin". This paragraph only contains content and shows the paragraph box.
This is a sampler of text displaying the components of the box model. The areas within this model are "content", "padding", "border" and "margin". Here 10px of padding have been added to the content and have pushed out the paragraph border 20 px from the content. With padding there is now space surrounding all 4 sides of the content and the space displays the background color of the content.
This is a sampler of text displaying the components of the box model. The areas within this model are "content", "padding", "border" and "margin". Here 20px of padding have been added to the content and have pushed out the paragraph border 10 px from the content. With padding there is now space surrounding all 4 sides of the content and the space displays the background color of the content. In this example, a 2 pixel white border has been added on all sides of the outside edge of the padding.
This is a sampler of text displaying the components of the box model. The areas within this model are "content", "padding", "border" and "margin". Here 20px of padding have been added to the content and have pushed out the paragraph border 20 px from the content. With padding there is now space surrounding all 4 sides of the content and the space displays the background color of the content. In this example, a 2 pixel white border has been added on all sides of the outside edge of the padding. The margin sets the distance between this paragraph and adjacent elements so it pushes paragraph away from other elements that it would otherwise touch. Here a margin of 50 pixels has been added to all sides.
If an element is assigned a width, then it is possible to calculate "how big is the
box".This
paragraph has been assigned a width in the style for the
<p> tag.
400 pixels is the width of the <p> tag
10 pixels
of left padding
10 pixels of right padding
2 pixels of left border
2 pixels of right border
50 pixels of left margin
50 pixels or right margin
TOTAL 524 PIXELS