Last updated on:May 26th, 2018,

Margin in CSS

What is margin?

The margin is the space outside the border.

How to put margin?

Margin top:

CodeOutput
margin-top: 0px;T4Tutorials
margin-top: 10px; 

T4Tutorials

margin-bottom: 0px;T4Tutorials
margin-bottom: 10px;T4Tutorials

 

margin-right: 0px;

T4Tutorials

margin-right: 20px;

          T4Tutorials          

margin-left: 0px;T4Tutorials
margin-left: 30px;                 T4Tutorials

Example:

<html>
<head>
<style>
table
{
border-style: dotted;
margin-top: 30px;
margin-bottom: 45px;
margin-right: 5px;
margin-left: 5px;
}
</style>
</head>
<body>
<table border=”2″>
<tr><td>
<p>this is demo of margin</p>
</td></tr>
</table>
</body>
</html>

Output:              

 

                                                       

this is demo of margin

 

 

 


What is padding?

Padding is the space between content and the border.

How to put padding?

Example:

<html>
<head>
<style>
table
{
padding-top: 60px;
padding-bottom: 20px;
padding-right: 30px;
padding-left:50px;
}
</style>
</head>
<body>
<table border=”2″>
<tr><td>this is</td></tr>
</table>
</body>
</html>

Output:

                                  

 

                                                                           

                                                                        this is padding

 

 

 

 

0Shares

Leave a Reply

Your email address will not be published.