CSS - Margins



This chapter discusses about the margins in CSS. Margins are used to create space around an element.

They define the amount of space between an element's border and adjacent elements.

Possible Values

Following values can be passed to each side:

Value Description
auto The margin is calculated automatically by the browser
length The margin is specified in px, pt, cm, etc
% The margin is specified in percentage (%) of the width of the containing element
inherit The margin is inherited from the parent element

Note: Negative values are allowed to be passed as margin.

Syntax

selector {
    margin: top right bottom left;
  }

You can specify margins for all sides at once (top, right, bottom, left) or set specific values for individual sides.

CSS Margins - Related Properties

You can set the margin for each side individually, which is as follows:

Property Description
margin a shorthand property that sets the margin properties in one declaration
margin-top sets the top margin of the element
margin-right sets the right margin of the element
margin-bottom sets the bottom margin of the element
margin-left sets the left margin of the element
margin-block sets logical block start and end margins for an element.
margin-inline sets logical inline start and end margins of an element.
Advertisements