CSS Padding and Margin Tutorial, TutorialsPoint

CSS Padding and Margin

Padding : Padding is used to define the space between the content and the border. (Inside Border)

Margin : Margin is the space outside the border. (Outside Border)

You can easily specify the different paddings and margins for the different sides of an element such as top, right, bottom or left side using the CSS individual padding and margin properties.

Padding Examples :

<html>
<head>
<title>CSS Padding</title>
<style type="text/css">
.padding_top{
border:1px solid #000;
padding-top:40px;
background:#FC0;
color:#000;
width:auto;
}
.padding_bottom{
border:1px solid #000;
padding-bottom:40px;
background:#FC0;
color:#000;
width:auto;
}
.padding_left{
border:1px solid #000;
padding-left:150px;
background:#FC0;
color:#000;
width:auto;
height:60px;
}
.padding_right{
border:1px solid #000;
padding-right:100px;
background:#FC0;
color:#000;
width:auto;
height:60px;
}
.padding_all{ 
padding:22px 30px;
color:#FFF;
background:#F60;
width:auto;
border:1px solid #09C;
}
</style>
</head>
<body>
 
<div class="padding_top"> This is Padding Top Sample Text</div> <br>
<div class="padding_bottom">This is Padding Bottom Sample Text</div> <br>
<div class="padding_left">This is Padding Left Sample Text</div> <br>
<div class="padding_right">This is Padding Right Sample Text</div> <br>
<div class="padding_all">This is Padding Total</div>
 
</body>
</html>

Output :

This is Padding Top Sample Text

This is Padding Bottom Sample Text

This is Padding Left Sample Text

This is Padding Right Sample Text

This is Padding Total

Margin Examples :

<html>
<head>
<title>CSS Margin</title>
<style type="text/css">
.margin_top{
border:1px solid #000;
margin-top:40px;
background:#FC0;
color:#000;
width:auto;
}
.margin_bottom{
border:1px solid #000;
margin-bottom:40px;
background:#FC0;
color:#000;
width:auto;
}
.margin_left{
border:1px solid #000;
margin-left:150px;
background:#FC0;
color:#000;
width:auto;
height:60px;
}
.margin_right{
border:1px solid #000;
margin-right:100px;
background:#FC0;
color:#000;
width:auto;
height:60px;
}
.margin_all{ 
margin:22px 30px;
color:#FFF;
background:#F60;
width:auto;
border:1px solid #09C;
}
</style>
</head>
<body>
 
<div class="margin_top"> This is Margin Top Sample Text</div> <br>
<div class="margin_bottom">This is Margin Bottom Sample Text</div> <br>
<div class="margin_left">This is Margin Left Sample Text</div> <br>
<div class="margin_right">This is Margin Right Sample Text</div> <br>
<div class="margin_all">This is Margin Total</div>
 
</body>
</html>

Output :

This is Margin Top Sample Text

This is Margin Bottom Sample Text

This is Margin Left Sample Text

This is Margin Right Sample Text

This is Margin Total

CSS Tutorial