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 test pages: box model - forms

Margins

Each of these elements should have large margins. Since they are inline blocks, the margins should be visible both horizontally and vertically.
  1. A text box:
  2. A radio button:
  3. A checkbox:
  4. A submit button:
  5. A reset button:
  6. A push button:
  7. A password box:
  8. An upload control:
  9. A hidden control:
  10. A image button:
  13. The second option in the following select should(?) have a 100px margin.
  15. A fieldset A legend in that fieldset
  16. A fieldset A legend in that fieldset

Padding

Each of these elements should have large paddings. Where appropriate, the padding should occur inside the form element.
  1. A text box:
  2. A radio button:
  3. A checkbox:
  4. A submit button:
  5. A reset button:
  6. A push button:
  7. A password box:
  8. An upload control:
  9. A hidden control:
  10. A image button:
  13. The second option in the following select should have 100 pixels of padding.
  15. A fieldset A legend in that fieldset
  16. A fieldset A legend in that fieldset

Borders

Each of these elements should have big borders. They should be red and ridged. In each case, the only border visible should be that specified by the border. As replaced elements they should extend the height of the line box.
  1. A text box:
  2. A radio button:
  3. A checkbox:
  4. A submit button:
  5. A reset button:
  6. A push button:
  7. A password box:
  8. An upload control:
  9. A hidden control:
  10. A image button:
  11. A image button with alt text:
  14. The second option in the following select should have a 100px red ridged border.
  16. A fieldset A legend in that fieldset
  17. A fieldset A legend in that fieldset

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