RichInStyle.com
 Tutorials Bugs Masterclass Free stuff Test pages Proposals

Core tests
Attaching style Applying style Key concepts Color and background Fonts Text Lists Box model

Advanced tests
Positioning Boxes Generated content Dynamic effects Tables Paged media @font-face Aural styles Language styles

This test
Margin-* Margin Margin collapsing Padding-* Padding Border-*-width
Border-width Border-*-style Border-style Border-*-color Border-color
Border-* Border Forms Horizontal rules Border styles Border widths
Margin widths Inline box: non-replaced Inline box: non-replaced 2 Inline box: replaced Inline box: replaced 2

RichInStyle.com tests: padding

This is a control. This is a control. This is a control. This is a control. This is a control.

Note for all the examples below, paddings are colored by background.

  1. This should have a 100px padding on all sides

    This is a control.

  2. This should have a 50px vertical padding and 100px horizontal paddings.

    This is a control.

  3. This should have a 50px top padding, 150px bottom padding and 100px horizontal paddings.

    This is a control.

  4. This should have a 50px top padding, 100px right padding, 150px bottom and 200px left padding.

Negative padding tests

This is a control.

  1. This has negative padding, but shouldn't look any different from normal since negative padding is illegal and should be ignored.

    This has negative padding, which should be ignored. However, since the declaration is padding-top: 100px; padding-top: -20px, that should result in reversion to 100 pixels, and therefore this should have padding of 100 pixels.

Copyright © RichInStyle.com 2000; all rights reserved. See copyright document for terms of use. Please visit Bukit Lawang flood appeal.