Skip to content

Add Different Margins to Each Side of an Element

Sometimes you will want to customize an element so that it has a different margin on each of its sides.

CSS allows you to control the margin of all four individual sides of an element with the margin-top, margin-right, margin-bottom, and margin-left properties.

Give the blue box a margin of 40px on its top and left side, but only 20px on its bottom and right side.

Tests

  • Waiting: 1. Your blue-box class should give the top of elements 40px of margin.
  • Waiting: 2. Your blue-box class should give the right of elements 20px of margin.
  • Waiting: 3. Your blue-box class should give the bottom of elements 20px of margin.
  • Waiting: 4. Your blue-box class should give the left of elements 40px of margin.
/**
* Your test output will go here
*/