CSS margin

The CSS margin property defines the space around an element's content, outside of any borders or padding. It is used to create space between elements, and can be specified for individual sides or all sides of an element.

The margin property can take the following values:

• margin-top: sets the top margin of an element
• margin-right: sets the right margin of an element
• margin-bottom: sets the bottom margin of an element
• margin-left: sets the left margin of an element
• margin: sets all four margins of an element at once

When specifying the margin property, you can use different units such as pixels, em, percentages, etc.

    .box {
      width: 200px;
      height: 100px;
      background-color: lightblue;
      margin: 20px;
    }
  

In the example above, an element with a class of .box has a margin of 20 pixels on all sides. This creates space around the element.

You can also specify margins for individual sides:

    .box {
      width: 200px;
      height: 100px;
      background-color: lightblue;
      margin-top: 10px;
      margin-right: 20px;
      margin-bottom: 30px;
      margin-left: 40px;
    }
  

In this example, the .box element has different margin values for each side, creating space around the element in a specific direction.

Remember that margins can also collapse when two adjacent elements have margins that touch each other. This means that the largest of the two margin values will be used.

Experiment with different margin values to see how they affect the spacing of elements on your webpage!