You’re viewing an archive of outdated material. Visit The Web Standards Project’s updated site to learn about our current mission.

Margin problems (3)

The following is the stylesheet for this document.


    DIV { border: 10px solid teal; }

    .a  { padding: 10px;
          margin: 10px; }

    .b  { padding: 10px 5px;
          margin: 10px 5px; }

    .c  { padding: 10px 5px 20px;
          margin: 10px 5px 20px; }

    .d  { padding: 10px 5px 20px 2px;
          margin: 10px 5px 20px 2px; }

Shorthand all the way around

There should now follow three boxes with borders 10 pixels wide. The gap between the outer and middle and middle and inner should be 10 pixels wide too, all the way around.

a

Shorthand for top/bottom and left/right together

The following three boxes should have a similar layout, but the gap between the boxes should be 10 pixels above and below and 5 pixels on the sides.

b

Shorthand for top, bottom, and left/right together

The following three boxes should have a similar layout, but the gap between the boxes should be 10 pixels at the top, 5 pixels on the sides, and 20 pixels on the bottom.

c

Shorthand for top, bottom, left, and right

The following three boxes should have a similar layout once again, but the gap between the boxes should be 10 pixels above, 5 pixels on the right, 20 pixels below, and 2 pixels to the left.

d