Margin Border and padding Properties of box model

Margin Property

Margin is the outermost area surrounding the element. It is transparent and does not have background color. Following are the properties that implement margin:

Margin-top:  This will apply the margin to top side of the element.

Margin-left: This will apply the margin to the left side of the element

Margin-bottom: This will apply the margin to the bottom side of the element.

Margin-right: This will apply margin to the right side of the element.

Following is the example for the margin

p{

margin-top: 10px;

margin-left: 10px;

margin-bottom: 10px;

margin-right: 10px;

}

You can also set the property for top, right, bottom, left using the “margin” property alone

p{

margin: 10px 10px 10px 10px

} 

The above example will set the margin for all the sides to 10px.

If you don’t want margin on left and the right side of the element but want 5px margin on the top and bottom side of the element. Following example shows how to do it.

p{

margin: 10px 0px 10px 0px

} 

Always remember when using the margin property it will be applied in order “top, left, bottom, right”.

p{margin: 5px;} 

The above example will set the property for all the sides to 5px.

Border Property

The border is the area between the padding and margin of the element.  The border property allows us to decide the display of the border.  The border has three important properties those are as follows:

-          border-width

This property will set the width for the property. It has following values.

o   Thin

o   medium

o   thick

o   Length

  For example with output :

<p style="border-style: solid; border-width: thin; width:200px; " >border-width:thin</p>

 <p style="border-style: solid; border-width: medium;  width:200px;" >border-width:medium</p>

  <p style="border-style: solid; border-width: thick;  width:200px;" >border-width:thick</p>

  <p style="border-style: solid; border-width: 10px;  width:200px;" >border-width:10px</p>

Output of above code is as follows:

border-width:thin

border-width:medium

border-width:thick

border-width:10px

-          border-style

 The border style property sets the style for the border. There are different values for the style property. Those are shown below with example:

      <p style="border-style: none; border-width: medium; width:200px; padding:5px;" >border-style:none</p>

       <p style="border-style: hidden; border-width: medium; width:200px; padding:5px;" >border-style:hidden</p>

              <p style="border-style: dashed; border-width: medium; width:200px; padding:5px;" >border-style:dashed</p>

       <p style="border-style: dotted; border-width: medium; width:200px; padding:5px;" >border-style:dotted</p>

       <p style="border-style: solid; border-width: medium; width:200px; padding:5px; " >border-style:solid</p>

       <p style="border-style: inset; border-width: medium; width:200px; padding:5px; " >border-style:inset</p>

       <p style="border-style: outset; border-width: medium; width:200px; padding:5px; " >border-style:outset</p>

       <p style="border-style: ridge; border-width: medium; width:200px; padding:5px; " >border-style:ridge</p>

       <p style="border-style: groove; border-width: medium; width:200px; padding:5px; " >border-style:groove</p>

Output of the above code is as follows:

border-style:none

border-style:hidden

border-style:dashed

border-style:dotted

border-style:solid

border-style:inset

border-style:outset

border-style:ridge

border-style:groove

-          border-color

This property sets the property for border of the element.  Values can be set directly by color name, rgb function or by using hexadecimal values. Following is the example for border-color property:

<p style="border-style: solid; border-width: medium; width:200px; padding:5px; border-color: red " >border-color: red </p>

       <p style="border-style: solid; border-width: medium; width:200px; padding:5px; border-color: rgb(255,255,0) " >border-color: rgb(255,255,0) </p>

       <p style="border-style: solid; border-width: medium; width:200px; padding:5px; border-color: #0000FF " >border-color: #0000FF</p>

Output of the above code is as follow :

border-color: red

border-color: rgb(255,255,0)

border-color: #0000FF

Also you can set the border property using the “border” keyword. For setting the border property set it in the sequence of width, style and color and following is the example for the same:

        border: 5px dashed red;

The border has four sides top, bottom, left, right now if you want to set the different settings for all the sides you can do it by using following set of properties :

-          top

o   border-top-width: sets the width of the top border

o   border-top-style: sets the style of the top border

o   border-top-color: sets the color of the top border

o   border-top: sets all the above three properties.

-          bottom

o   border-bottom-width: sets the width of the bottom border

o   border-bottom-style: sets the style of the bottom border

o   border-bottom-color: sets the color of the bottom border

o   border-bottom: sets all the above three properties.

-          left

o   border-left-width: sets the width of the left border

o   border-left-style: sets the style of the left border

o   border-left-color: sets the color of the left border

o   border-left: sets all the above three properties.

-          right

o   border-right-width: sets the width of the right border

o   border-right-style: sets the style of the right border

o   border-right-color: sets the color of the right border

o   border-right: sets all the above three properties.

Following is the example where different settings are set for left,right, top, bottom using the properties mentioned above.

<p style="width: 500px;border-right: 5px inset black ;border-bottom: 5px dotted green ;border-left: 5px outset blue; text-wrap: wrap; border-top: 5px dashed red " >This is example of the border propert where different setting is set for top, left, bottom, right</p>

Output of the above code as follow :

This is example of the border propert where different setting is set for top, left, bottom, right

Padding property

Padding is area surrounding the element content. This property is affected by the element background color. It creates a space between element content and border of the element. Like the border and margin property this property has four sides “top, bottom, left, right”. Following are the keywords that are used to set values for this element:

-          Padding-top

Padding top property will set the padding for top side of the element content.                                   Padding-top: 10px;

-          Padding-left

Padding left property will set the padding for left side of the element content.

Padding-left: 10px;

-          Padding-bottom

Padding bottom property will set the padding for bottom side of the element content.

Padding-bottom: 10px;

-          Padding-right

Padding right property will set the padding for right side of the element content.

Padding-bottom: 10px;

         Example with output:

<p style="border-style: solid; border-width: medium; width:200px; padding-left:10px; padding-right:10px; padding-top:10px; padding-bottom:10px;border-color: #0000FF " >This example sets the padding  for top, bottom, right, left to 10 px</p>

Output of the above code as follows :

This example sets the padding for top, bottom, right, left to 10 px

You can also set the above properties under single name.

-          padding

You can set the property under one name. Following are some examples of padding.

The below example will set the padding for element on the all sides.

p{padding: 5px;} 

Below example set the padding on the top and bottom side=10px, left and right side =5px.

p{padding: 10px 5px 10px 5px;}