Browser Box Model Test Page

Basic Margin Tests

margin: 20px (all sides)

margin: 10px 30px (top/bottom, left/right)

margin: 5px 10px 15px 20px (top, right, bottom, left)

margin-top: 30px, margin-bottom: 10px

Basic Padding Tests

padding: 20px (all sides)

padding: 10px 30px (top/bottom, left/right)

padding: 5px 10px 15px 20px (top, right, bottom, left)

padding-left: 40px

Border Tests

5px solid red border

10px top/bottom, 5px left/right dashed green border

Mixed borders (top, right, bottom, left all different)

Mixed Margin/Padding/Border

margin:15px, padding:10px, border:2px

margin:5px 20px, padding:15px 5px, border:8px double

Nested Elements

Parent with padding:20px, margin:10px

Child with margin:15px, padding:10px, border:3px

Edge Cases

No margin, no padding, no border

Negative margin (-10px) with padding

Percentage Values

margin:5%, padding:2%, width:50%