CSS - Margins Property

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.

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.

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.

Print Page