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

 

 

 

 

Fazal Rehman Shamil Click Here to Know More
Instructor, Researcher, Blogger, SEO Expert, Poet and Publisher of International Journal Of Software, Technology & Science ISSN : 2616 - 5325
Dear Professors and Resarchers!You are welome to Cite these tutorials in your research or slides etc. Please don't forget to mention the reference of website. Copy Paste of text is strcitly forbidden. Images can be reuse because images are protected with watermark.

Leave a Reply

Your email address will not be published. Required fields are marked *