CSS Margin Property

CSS Margin Property. A margin appears to be a reasonably uncomplicated thing, though, in this article, we will catch a look at some of the things which play people up with regard to using margins. Indistinct, we will be attending to how margins communicate with each other, and how margin collapsing actually works.

Read Also: How to use CSS Padding

The margin-top, margin-right, margin-bottom, and margin-left properties were explained right back in CSS1, besides the stenotype margin for placing all four attributes at once.

margin:top|right|bottom|left;
margin:10px; 20px; 30px; 40px;

Margin Properties.

• margin-top:10px;
• margin-right:20px;
• margin-bottom:30px;
• margin-left:40px;

Margin Top.

The margin-top CSS property sets the margin space on the top of an element. A positive value sets it very from its neighbors, while a negative value places it closer.

Read Also: How CSS Position works

<h1>The margin-top Property</h1>
<p>This paragraph has no margins specified.</p>
<p class="margin-top">This paragraph has a 50pixels top margin.</p>
<p>This paragraph has no margins specified.</p>
<style>
.margin-top {margin-top: 50px;}
</style>

<h1>The margin-right Property</h1>
<p>This paragraph has no margins specified.</p>
<p class="margin-right">This paragraph has a 50pixels right margin.</p>
<p>This paragraph has no margins specified.</p>
<style>
.margin-right {margin-right: 50px;}
</style>

Margin Bottom

The margin-bottom CSS property fixes the margin space on the bottom of an element. A positive value sets it very from its neighbors, while a negative value places it closer.

<h1>The margin-bottom Property</h1>
<p>This paragraph has no margins specified.</p>
<p class="margin-bottom">This paragraph has a 50pixels bottom margin.</p>
<p>This paragraph has no margins specified.</p>
<style>
.margin-bottom {margin-bottom: 50px;}
</style>

Margin Left.

The margin-left CSS property fixes the margin space on the left side of an element. A positive value sets it very from its neighbors, while a negative value places it closer.

<h1>The margin-left Property</h1>
<p>This paragraph has no margins specified.</p>
<p class="margin-left">This paragraph has a 50pixels left margin.</p>
<p>This paragraph has no margins specified.</p>
<style>
.margin-left {margin-left: 50px;}
</style>

That’s It.

Have a nice day.