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". This first box just contains a paragraph and 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". This second box contains a paragraph and displays the background color of the content. In addition, the paragraph is now surrounded by 25 pixels of padding.
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". This third box contains a paragraph with 25 pixels of padding, displays the background color of the content, and now has a 6 pixel thick dark blue-green double border.
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". This Fourth box contains a paragraph with 25 pixels of padding, displays the background color of the content, has a 6 pixel thick dark blue-green double border, and is now surrounded by a 30 pixel wide margin.
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". This Fifth box contains a paragraph with 25 pixels of padding, displays the background color of the content, has a 6 pixel thick dark blue-green double border, and is surrounded by a 30 pixel wide margin. In additon, a width of 600 pixels has been assigned to the <p> tag, thus the box had the following calculated width:
600 pixels is the width of the <p> tag
25 pixels of left padding
25 pixels of right padding
6 pixels of left border
6 pixels of right border
30 pixels of left margin
30 pixels or right margin
TOTAL 722 PIXELS