Margin in CSS

What is margin?

The margin is the space outside the border.

How to put margin?

Margin top:

Code Output
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

 

 

 

 

Fazal Rehman Shamil
Welcome to all friends. The reason for our success is only your love for T4Tutorials. Our team is always available to answer your queries regarding any kind of confusions or discussion regarding your study and career matters. For discussion with us please join our facebook group "T4Tutorials.com". The link of the group is mentioned below. Thanks and love to all for connecting with us. We are nothing without you. Love you all.....
https://web.facebook.com/groups/2066136233601097/

Leave a Reply