CSS Margins

The margin property in CSS is used to set the space around an element. Margins can be set for all sides of an element (top, right, bottom, left) or individually for each side.

Setting Margins

To set margins for all sides of an element, you can use the following syntax:

selector {
    margin: 20px;
}

This will set a margin of 20 pixels for all sides of the element selected by selector.

If you want to set different margins for each side, you can use the following syntax:

selector {
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 15px;
    margin-left: 25px;
}

This will set a top margin of 10 pixels, right margin of 20 pixels, bottom margin of 15 pixels, and left margin of 25 pixels for the selected element.

Example

Let's consider a fictional example where we have a <div> element with a class of "box" and we want to add margins to it:

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

Result:

In this example, the .box element will have a margin of 20 pixels on all sides.

Summary

The margin property in CSS is used to set the space around an element. You can set margins for all sides at once or individually for each side using the margin-top, margin-right, margin-bottom, and margin-left properties.