<!DOCTYPE html>
<html>
<head>
<title>Margin Examples</title>
<style>
p {
background-color: #4caf50;
color: white;
}
.m {
margin: 12px;
}
.mt {
margin-top: 12px;
}
.ml {
margin-left: 12px;
}
.mr {
margin-right: 12px;
}
.mb {
margin-botom: 12px;
}
</style>
</head>
<body>
<p class="m">Paragraph text with equal margins for all sides</p>
<p class="mt">Paragraph tezt with margin given at the top</p>
<p class="ml">Paragraph tezt with margin given at the left</p>
<p class="mr">Paragraph tezt with margin given at the right</p>
<p class="mb">Paragraph tezt with margin given at the bottom</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Margin Examples</title>
<style>
p {
background-color: #4caf50;
color: white;
}
.m1 {
margin: 10px;
}
.m2 {
margin: 15px 10px;
}
.m3 {
margin: 20px 15px 10px;
}
.m4 {
margin: 25px 20px 15px 10px;
}
</style>
</head>
<body>
<p class="m4">Paragraph text has differnt margins for each sides</p>
<p class="m3">Paragraph text has differnt margins for Top, Right and Bottom sides</p>
<p class="m2">Paragraph text has differnt margins for only Top and Right sides</p>
<p class="m1">Paragraph text has equal margins for each sides</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Margin auto Examples</title>
<style>
.parent-container {
width: 100%;
text-align: center;
}
.centered-element {
width: 200px;
margin: 0 auto; /* Horizontally center the element */
background-color: lightblue;
padding: 10px;
}
</style>
</head>
<body>
<div class="parent-container">
<div class="centered-element">Centered Element</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Margin Inherit Examples</title>
<style>
.parent-box {
width: 300px;
margin: 20px;
background-color: lightgreen;
}
.child-box {
margin: inherit; /* Inherit margin from parent */
background-color: lightyellow;
padding: 10px;
}
</style>
</head>
<body>
<div class="parent-box">
<div class="child-box">Child Box with Inherited Margin</div>
</div>
</body>
</html>
Property
Description
Example