CSS 3 Tutorial Banner Image

CSS Margin Property- CSS Tutorial for Beginners

Views: 456

In our previous CSS tutorial we learned about the CSS height and width properties, how we use them to apply height and width to our elements, in this tutorial we will learn about applying margin to our elements.

Previous Tutorial:

CSS Height and Width Property Tutorial For Beginners

css margin padding height width and border

What is margin?

Margin allows to add some space outside our HTML element.

CSS Margin Property- CSS Tutorial for Beginners

The CSS Margin Property

We can apply margins to our HTML elements using the “margin:value” property. This property will set margin for all four sides of our element.

Usage:

h1{

margin:10px;

}

Note: The rule will apply a 10px margin to all sides of our h1 element.

The default value for margin is 0 (ZERO) for every side of any element, margin property can have following values:

  • Auto: if the margin value is set to auto then the browser will automatically calculate width and height of window and apply margin.
  • Length: The length can be in percent (%), points (pt), pixel (px), inch (in) etc.
  • Inherit: This will inherit values from its parent element.

CSS Margin Individual Sides

If we want to apply different margin on each side of our HTML element then it is also possible for us to define individual margin for each side of our element. Suppose we want our element to have a 5px margin on right, 4px on left, 10px on top and 10px on bottom, then we can use the following rules for our margin.

h1{

                margin-right:5px;

                margin-left:4px;

                margin-top:10px;

                margin-bottom:10px;

}
  • margin-right: Adds margin to the right side of HTML element.
  • margin-left: Adds margin to the left side of HTML element.
  • margin-top: Adds margin to the top side of HTML element.
  • margin-bottom: Adds margin to the bottom side of HTML element.

Note: The above set of margin rules will apply margins to each sides of element independently, it is not important to use rules for every side, margins can be applied to any side of element as needed.

CSS Margin Shorthand Property

With CSS margin shorthand property different margin rules for each side can be applied in a single line. There are different ways for applying margin to element with CSS shorthand property. Here is a description for usage of CSS margin with shorthand in order.

  • Shorthand Property with One Value: if a single value is passed with CSS margin property, the value will be applied to all four sides. i.e. margin:10px; this rule will set a margin of 10 pixels to each side of the element.
  • Shorthand Property with Two Values: If two values are passed using CSS margin property then the first value is applied to top and bottom of element and second is applied to right and left of the element. i.e. margin:5px 10px; this rule will set a margin of 5 pixels to top and bottom and a margin of 10 pixel to left and right of the element.
  • Shorthand Property with Three Values: If three values are passed to CSS margin property then the first value is applied to top, second to right and left and third the last most to bottom of the element. i.e. margin: 10px 5px 15px; this rule will set a 10 pixels of margin to the top of element and 5 pixels of margin to left and right of the element and 15 pixels of margin to the bottom of element.
  • Shorthand Property with Four Values: If four values are used for CSS margin property then the margin will be applied to all four sides separately with different values as provided, the values are passed in clockwise order, margin: <top>  <right>  <bottom> <left>; i.e. margin: 5px 10px 6px 15px; this rule will set 5 pixels of margin to top then 10 pixels of margin to right then 6pixels of margin to bottom and at the last most 15 pixels margin to left.

Centering an Element Horizontally with CSS margin property (margin:0 auto; )

When we are building a form block or any element, sometimes we need it to align in center of page or its parent element, it is not a rare scenario but on daily basis we need to do this. The CSS margin property provides a very simple hack to center our element horizontally. When we pass auto value for left and right margin of our element, the browser automatically calculates width of window and applies margin to our element, this trick centers our element horizontally. Let us see an usage

#my_div{

                width:200px;

                height:200px;

                background:#966;

                margin:0 auto;

}

Note: with the above rules we applied a height and width to our element, as we have no content in it, then a background color to identify the element and then margin rule to align our element in center.

Output

margin 0 auto; centering horizontally with css
Our div is centered horizontally in browser window

CSS Margin Collapse

When we apply vertical margins to any element, the margin of both element that are vertically aligned next to each other will collide with each other and the largest margin will be chosen as applied margin. Think of two div elements div1 at top and div2 below div1, div1 has a bottom margin of 10px and div2 has a top margin of 20px, then the both margins will collapse to form a new margin of 20px as 20px is the largest among both.

In the next tutorial we will learn about CSS padding.

CSS Padding Property- CSS Tutorial for Beginners

I hope you found this tutorial helpful, if you have any questions or suggestions in mind, write down in comments below and if this tutorial helped you then share it on social media and with your friends, subscribe to our notifications for receiving update on any new tutorial or tricks we share.

Comments: 2

Your email address will not be published. Required fields are marked with *