This is a sample of text which I can use to learn about the box model. The areas within this model are "content", "padding", "border" and "margin". I will begin with a paragraph which only contains content and then add an element in each of the following paragraphs.
This is a sample of text which I can use to learn about the box model. The areas within this model are "content", "padding", "border" and "margin". I will begin with a paragraph which only contains content and then add an element in each of the following paragraphs. When I add the 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 sample of text which I can use to learn about the box model. The areas within this model are "content", "padding", "border" and "margin". I will begin with a paragraph which only contains content and then add an element in each of the following paragraphs. When I add the padding there is now space surrounding all 4 sides of the content and the space displays the background color of the content. Now I have a white border of 2 pixels.
This is a sample of text which I can use to learn about the box model. The areas within this model are "content", "padding", "border" and "margin". I will begin with a paragraph which only contains content and then add an element in each of the following paragraphs. When I add the padding there is now space surrounding all 4 sides of the content and the space displays the background color of the content. Now I have a white border of 2 pixels. Finally I have a 50 pixel margin on all 4 sides of the content which will display in the page color (in this case blue-gray)
This
box can be used to calculate "how big is the
box"
since I have assigned a width to the style for the
<p> tag.
500 pixels is the width of the <p> tag
20 pixels
of left padding
20 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 644 PIXELS