CSS- Margins

We use CSS margin properties to create space around elements, outside of any defined borders. It is completely transparent and doesn't have any background color. It clears an area around the element.

There are properties for setting the margin for each side of an element (top, right, bottom, and left).

CSS has properties for specifying the margin for each side of an element:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
  • Margin-top

    To set top margin of an element, we use margin-top property. It can have a value in length, % or auto.

    Example :-

    Result

    This is a paragraph with a specified top margin

    This is another paragraph with a specified top margin in percent

    Margin-right

    To set right margin of an element, we use margin-right property. It can have a value in length, % or auto.

    Example :-

    Result

    This is a paragraph with a specified right margin

    This is another paragraph with a specified right margin in percent

    Margin-bottom

    To set bottom margin of an element, we use margin-bottom. It can have a value in length, % or auto.

    Example

    Result

    This is a paragraph with a specified bottom margin.

    This is another paragraph with a specified bottom margin in percent

    Margin-left

    To set left margin of an element, we use margin-left property. It can have a value in length, % or auto.

    Example

    Result

    This is a paragraph with a specified left margin

    This is another paragraph with a specified top margin in percent