CSS3 MARGIN PROPERTY
2021-11-16 14:12 · 5 min read
CSS3 margin property used to add some gap between two elements. Margin property gives a proper look to a web page.
CSS3 Margin
You can use margin property to separate inline and block elements.
{margin-left : 20px;}
property value
Example
Here is a simple example of margin property.
We are applying margin property on a <p> tag.
When you run the code you can see that the 2nd paragraph has margin=50px from left.
<body>
<p type="submit" style="color:rgb(255, 255, 255);background-color: red;">
theProDeveloper Tutorial
</p>
<p type="submit" style="color:rgb(255, 255, 255);background-color: red;margin-left:50px">
theProDeveloper Tutorial
</p>
</body>
CSS3 Margin Property
CSS3 margin property specifies a Shorthand property (all padding properties in one declaration)
margin:10px
Margin property is used when you want equal margin from the top, right, bottom, and left direction.
margin-top:10px
Margin from top direction
margin-right:10px
Margin from the right direction
margin-bottom:10px
Margin from bottom direction
margin-left:10px
Margin from the left direction
<!DOCTYPE html>
<html>
<head>
<style>
.tdb-school{color:black;background-color:white;
margin:10px 35px 10px 35px;
padding:10px 20px;
border:none;
border-radius:5px}
.top{margin-top:50px}
.right{margin-right:50px}
.bottom{margin-bottom:50px}
.left{margin-left:50px}
div{background-color:black;
margin-bottom:5px}
</style>
</head>
<!--Body-->
<body>
<div><button type="submit" class="tdb-school margin">margin</button></div>
<div><button type="submit" class="tdb-school top">margin</button></div>
<div><button type="submit" class="tdb-school right">margin</button></div>
<div><button type="submit" class="tdb-school bottom">margin</button></div>
<div><button type="submit" class="tdb-school left">margin</button></div>
</body>
</html>
Margin Short-hand
CSS3 margin property specifies a Shorthand property (all margin properties in one declaration)
{margin : 10px 10px 10px 10px;}
property top right bottom left
margin: 10px 10px 10px 10px
Example
{margin-top:10px;margin-right:10px;margin-bottom:10px;margin-left:10px;}
margin:10px 20px 30px 40px
<!DOCTYPE html>
<html>
<head>
<style>
.tdb-school{
color:black;
background-color:white;
padding:20px 20px 20px 20px;
margin:20px 20px 20px 20px;
border:none;
border-radius:5px;
}
div{background-color:black}
</style>
</head>
<!--Body-->
<body>
<div>
<button type="submit" class="tdb-school padding">
Padding
</button>
</div>
<br><br>
</body>
</html>