Margin

It is specified by the various margin property consisting of top, bottom, left, right and the shorthand for margin. It applies space on outside of the box i.e. between the box and the browser window, or between the box and the other elements in the web page. The various margin property are listed as
  • margin
  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
All of these properties are assigned values in absolute units of length or in percentage. The ‘margin’ property is a shorthand property for all of the four remaining margin properties. The four remaining properties define specific side of the margin as per their name as

Property

Margin Side

margin-top

Top

margin-right

Right

margin-bottom

Bottom

margin-left

Left

These properties are used as
.top {
margin-top: 30px;  margin-left: 50px; margin-bottom: 70px; margin-right: 90px; }
In the margin shorthand property, remaining four are specified in a clockwise order as top, right, bottom, and left.  In the example above, there is a 30px margin above the top class selector, 50px  in left,  70px in bottom and 90px in right. As shown in the figure

Margin

Variations of margin shorthand are illustrated
margin Property with Four Values – In this variation of margin shorthand property, value for all four margins are given. Thus it has all four specified in a clockwise sequence of top, right, bottom, and left margin. The example used earlier can be denoted in it as
.top {
margin: 30px 90px 70px 50px; }
margin Property with Three Values – The margin shorthand property can also be given by three value if the left and right margin values are the same, then only three values  are specified in the margin shorthand property as
.top {
margin: 70px 100px 50px; }
But still the margin shorthand properties with three values always follow the convention of top, right and left, bottom hence, the first value is for top margin, second for both left and right margins and third for the bottom margin.
margin Property with Two Values – Only two values can be given to the margin shorthand property where in the first value is for the top and bottom margins and the second value for the right and left margins. It is shown as
.top {
margin: 50px 100px; }
As explained earlier the shorthand properties with two values again follow the standard top and bottom, right and left  and hence, the first value of 50px is for. top and bottom and 100px for right and left.
margin Property with One Value – Even one value can be given for the margin shorthand property, which is applicable for all four sides of an element’s margin and is given as
.top {
margin: 50px; }

Get industry recognized certification – Contact us

Menu