CSS Margin, Padding & Border

Content means Width and Height of a box. Default width is auto for block and inline level elements. For block level, width auto means 100% of content space, and for inline, width is equal to content of element.

By assigning Width and Height, we are actually setting width and height of content box which is area of content available inside box.

But with box-sizing border-box, width and height are dimensions of total border-box, which is total area including, content, padding and border.

Units for width and height are px, em, and %.

Padding is used to give space inside an element. Padding inherit background color of content. As shown in example above, padding occupy space inside.

Padding units are px, em and %.

Apart form padding, we can also set padding-top, padding-right, padding-bottom and padding-left.

Css Padding Example

      padding is taking place inside border.

<style>
    img{
        border:2px solid #000; 
        padding:20px;
     }
</style>
<img src="1.png" alt="..">

---

Padding in percentage

Padding value can be in percentage. Padding in percentage is actually percentage of width of parent element content box. For example, an element with padding 10% and parent's content width 1200px is equal 10% of content box of parent element, which is 120px.

<style>
    .box{
        width:300px;
        padding-top:10%;
        background:aqua;
    }
</style>

<div class="box"></div>

Padding Shortcuts

Padding can have one to four values. First value is top padding and then next is in clockwise direction.

Long property	shortcut
padding-top:50px; padding-right:40px padding-bottom:30px padding-left:20px	padding: 50px 40px 30px 20px
padding-top:40px; padding-right:20px padding-bottom:40px padding-left:20px	padding:40px 20px

Padding is shorthand of padding-top, padding-right, padding-bottom, padding-left.

Margin is used to give space outside an element. Margin background color is transparent. Margin value can be positive or negative.

Margin units are px, %, em and auto. margin auto is used to align a block element in middle.

How to use CSS Margin

<img src="1.png" alt="..." >
<img src="1.png" alt="..." style="margin-left:50px;"  >
		

Margin Auto

Margin auto is used to center align block level elements. auto means left and right margins will be automatically aligned.

<img src="img.png" alt="">

<style>
    img{ display:block; margin:auto; border:1px solid #aaa;}
</style>

CSS border is used to give visible outline around an element. Border comes between Margin and Padding. Border can have different styles, color and width. There are three type of border Properties:

CSS Border Properties

1. Border-Style ( compulsory)
2. Border-Width
3. Border-Color

Border-style

Border-style is the most important property in all three. Without border-style, border will not work. Common border-styles are:

• Solid. Solid
• Dashed. Dashed
• Dotted. Dotted
• Double. Double
• Groove. Groove
• Inset. inset
• None. none

Border Style Example

     Image with border style solid

     Image with border style dashed

     Image with border style dotted

     Image with border style double

     Image with border style groove

     Image with border style inset

     Image with border style none

<img src="1.png" style="border-style:solid;" >
<img src="1.png" style="border-style:dashed;" >
<img src="1.png" style="border-style:dotted;" >
<img src="1.png" style="border-style:double;" >
<img src="1.png" style="border-style:groove;" >
<img src="1.png" style="border-style:inset;" >
<img src="1.png" style="border-style:none;" >
		

Border-width

A border can have width in px or em. Normally we use border width in pixels. Default border width is 3px and color is inherited from font color.

Border Width Example

     Image with border solid and width 3px

     Image with border solid and width 5px

     Image with border solid and width 8px

<img src="1.png" style="border:solid 3px;">
<img src="1.png" style="border:solid 5px;">
<img src="1.png" style="border:solid 8px;">
		

Border color

Border can have border color using border-color property.
We can use any color by name, hexadecimal color code, or rgb color code. Default border color is inherited from font color.

Border color

     Image with border color red

     Image with border color blue

     Image with border color green

<img src="1.png" style="border-style:solid;border-color:red;" >
<img src="1.png" style="border-style:solid;border-color:blue;" >
<img src="1.png" style="border-style:solid;border-color:green" >
		or
		
<img src="1.png" style="border:solid red;" >
<img src="1.png" style="border:solid blue;" >
<img src="1.png" style="border:solid green" >
		

Border Property

Border property is shortcut of border-style, border-width and border-color. To give same border style, width in color in all four sides, border is used. See example

<style>
button{ width:100px; height:30px;}
.btn1{ border:solid 1px red;}
.btn2{ border:dashed 2px blue;}
.btn3{ border:double 3px green;}
</style>

<button class="btn1">Button 1</button>    		
<button class="btn2">Button 2</button>    		
<button class="btn3">Button 3</button>    		
		

Border Shortcut

Border Image or Gradients

CSS3 Also supported Border Images and Gradients.