Margin-
Margin is opted to give plenty space around an element. The margin does not have a background color, and it is completely transparent. Margin has four properties which are given below-
• top
• bottom
• left
• right
The following HTML illustrates how to opt margin in style-
<HTML>
<body>
<p style="margin-top:100px;"> Margin from top</p>
<p style="margin-bottom:100px;">Margin from bottom</p>
<p style="margin-right:50px;">Margin from right</p>
<p style="margin-left:50px;">Margin from left</p>
</body>
</HTML>
Output of the program is given below-
Margin from top
Margin from bottom
Margin from right
Margin from left
Padding-
The padding clears an area near by the content (inside the border) of an element. The padding is exaggerated by the background color of the element. Padding also has four properties which are given below-
• top
• bottom
• left
• right
The following HTML code illustrates how to opt padding-
<HTML>
<body>
<div style="border:1px solid black;">
<p style="padding-top:100px;">padding from top</p>
<p style="padding-bottom:100px;">padding from bottom</p>
<div>
<p style="padding-right:50px;">padding from right</p>
<p style="padding-left:50px;">padding from left</p>
</body>
</HTML>
Output of the program is given below: