Borders, Padding, and Margins

Body

The body of this page should have a background color of #fffdd0, utilize the font family "sans serif," and have margins all around of 20 pixels.

Basic Border

This box should have a 2px dashed red border all the way to the margins with a minimum height of 38 pixels.

Types of Borders

This box should have a minimum height of 100px, width of 300px, border width of 10px, the left border should be dashed and red, the right should be dotted and black, the top should be double and purple, and the bottom should be groove style with color orange.

Cell Padding Example

This box helps you see clearly how cell padding affects placement. The box itself fills the space from top to bottom and left to right, all the way out to the margins. Cell padding affects the space between the box border and the text width. For this box, you should have a solid, 5px green border, with padding on the left of 10px, 50px on the right, 20px on the top, and 100px on bottom.

Margin Example

This box helps you see how margins work. There is no cell padding so the text is right up against the border, but the entire box is pushed away from the sides of the page and top/bottom of other elements through margins. The border should be solid blue at 10px wide, with margins at 20px on top, 100px on the right, 200px on bottom, and 50px on the left.

Floats and Clears

No Float

In this box, the test image should be all the way in the upper left corner of the box with no padding and this text will be directly underneath the image. The border should be 2 pixels, solid blue, a height of 300 pixels, and a width of 500 pixels.

Float Left

In this box, the test image should be all the way in the upper left corner of the box with no padding and this text will be to the right of the image. The border should be 2 pixels, solid purple with a height of 300 pixels and a width of 500 pixels.

Float Right

In this box, the test image should be all the way in the upper right corner of the box with no padding and this text will be to the left of the image. The border should be 2 pixels, solid orange with a height of 300 pixels and a width of 500 pixels.

Float Left with Overflow Hidden

In this box, the test image should be all the way in the upper left corner of the box with no padding, and this text will be to the right of the image. The border should be 2 pixels, solid green, with a height of 100 pixels and a width of 800. The overflow should be set to "hidden" so the bottom of the image should be cut off.

The rest of the items covered in this chapter work best with vendor specific prefixes, so we're going to skip them for now!