CSS Margins


In CSS, the margin property is used to add space around an element. The margin property is a shorthand property for the following individual margin properties:

  • margin-top: specifies the top margin of an element.
  • margin-right: specifies the right margin of an element.
  • margin-bottom: specifies the bottom margin of an element.
  • margin-left: specifies the left margin of an element.

You can set the margin property on any element, and you can control the size of the margins by setting the values as necessary.

Here’s an example of how you might use the margin property:

.my-element {
    margin: 20px;

This would add a 20 pixel margin to all sides of the element with the class my-element.

You can also use the individual margin properties to specify different values for the margins on each side of the element. For example:

.my-element {
    margin-top: 10px;
    margin-right: 15px;
    margin-bottom: 20px;
    margin-left: 25px;

This would add a top margin of 10 pixels, a right margin of 15 pixels, a bottom margin of 20 pixels, and a left margin of 25 pixels to the element with the class my-element.

Margins are used to create space around an element, and they do not have a background color or border. If you want to add a background color or border to an element, you can use the background-color and border properties.