CSS Tutorial
CSS - Introduction CSS - How CSS works? CSS - Syntax CSS - Colors CSS - Backgrounds CSS - Borders CSS - Margins CSS - Padding CSS - Height/Width CSS - Box Model CSS - Text CSS - Fonts CSS - Icons CSS - Cursor CSS - Outline CSS - Links CSS - Lists CSS - Tables CSS - Display CSS - Overflow CSS - Position CSS - Float CSS - Align CSS - Opacity CSS - Combinator CSS - Pseudo Classes CSS - Pseudo Elements CSS - Attribute Selector CSS - Buttons CSS - Pagination CSS - Navigation Bar CSS - Dropdowns CSS - Specificity CSS - Transition
CSS Advanced
CSS - Rounded Corners CSS - Border Image CSS - Background CSS - Gradients CSS - Shadow CSS - Text Effects CSS - 2D Transform CSS - 3D Transform CSS - Animation CSS - Object-fit CSS - Box Sizing CSS - Filters CSS - Style Images CSS - Variables CSS - Media Queries CSS - Flexbox Layout CSS - Grid Layout
CSS Responsive
RWD - Introduction RWD - Grid View RWD - Media Queries RWD - Images
CSS References
CSS - Reference CSS - Selectors CSS - Functions CSS - Units CSS - Animatable CSS - Entities

CSS Margins

CSS margin properties defines the space around an HTML element. It is possible to use negative values to overlap content.

This Paragraph has 80px margin

We have the following properties to set an element margin:

  • 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
  • margin - specifies a shorthand property for setting all margin properties in one declaration

All the margin properties can have the following values:

  • auto - the browser calculates the margin
  • length - specifies a margin in px, pt, cm, etc. See length units
  • % - specifies a margin in % of the width of the containing element
  • inherit - specifies that the margin should be inherited from the parent element

Note: Margins create extra space around an element. In contrast, padding creates extra space within an element.


Margin Top

The margin-top property allows you set top margin of an element:

Run code

Margin Right

The margin-right property allows you set right margin of an element:

Run code

Margin Bottom

The margin-bottom property allows you set bottom margin of an element:

Run code

Margin Left

The margin-left property allows you set left margin of an element:

Run code

Margin - Shorthand Property

It is possible to specify all the margin properties in one property.

The margin property is a shorthand that sets the following properties in a single declaration:

Run code

The margin property can have from one to four values:

  • When one value is specified, it applies the same margin to all four sides.
  • When two values are specified, the first margin applies to the top and bottom, the second to the left and right.
  • When three values are specified, the first margin applies to the top, the second to the left and right, the third to the bottom.
  • When four values are specified, the margin apply to the top, right, bottom, and left in that order (clockwise).

The auto Value

You can set the margin property to auto to horizontally center an element within its parent element.

The element will then take up the specified width, and the remaining space will be split equally between the left and right margins:

Run code

Create a center aligned element using auto value:

Run code

Create a center aligned image using auto value:

Run code

The inherit Value

The inherit value is used to inherit margin from the parent element:

Run code

Negative Margins

It is possible to use negative values to overlap content:

Run code

CSS Margin properties

Property Description
margin A shorthand property for setting all margin properties in single declaration
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