tutorialstonight logo
A Platform To Learn To Code

CSS MARGINS



The margin property is used to specify space around the HTML element.The specified space is transparent and has no background color.

This paragraph has a margin of 50px.

Using this property we can specify top,bottom,left and right margin independently.These are following CSS margin properties.


CSS margin properties


Property Description
margin This sets all the value of margin.
margin-top It sets the top margin of the element.
margin-right It sets the right margin of the element.
margin-bottom It sets the bottom margin of the element
margin-left It sets the left margin of the element.


CSS margin values


Values Description
auto Browsers automatically calculate the margin.
inherit It inherits the margin from the parent element.
unit/length It sets margin in px,pt,cm etc.
% It sets the margin using the percentage of width of the container.

Margin on element

Specifying CSS margin property and its value we can create margin over the element.

Example

Run the code

Set different margin

We can specify different margin values to different side of the elements by using

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

Example

Run the code

CSS margin shorthand

Margin shorthand property is used to specify different margins to different sides of an element using just one attribute margin. Example : margin : 20px 30px 40px 50px

The values in shorthand margin are set anticlockwise starting from top=20px, right=30px, bottom=40px and ends at left=50px.

Example

Run the code



BOX

BOX