Margin
Margin in getcss
Margin properties of an element can be set with different margin classes.
Margin of an element can be set in pixels or in percentage
Margin in Pixels
<div class="m-20-px">
<p>Margin of this div element is 20px.</p>
</div>
</div>
Margin of this div element is 20px.
Top margin in Pixels
<div class="m-t-50-px">
<p>Top margin of this div element is 50px.</p>
</div>
</div>
Top margin of this div element is 50px.
Bottom margin in Pixels
<div class="m-b-80-px">
<p>Bottom margin of this div element is 80px.</p>
</div>
</div>
Bottom margin of this div element is 80px.
Left margin in Pixels
<div class="m-l-100-px">
<p>Left margin of this div element is 100px.</p>
</div>
</div>
Left margin of this div element is 100px.
Right margin in Pixels
<div class="m-r-90-px">
<p>Right margin of this div element is 90px.</p>
</div>
</div>
Right margin of this div element is 90px.
Horizontal margin in Pixels
<div class="m-x-60-px">
<p>Horizontal margin of this div element is 60px.</p>
</div>
</div>
Horizontal margin of this div element is 60px.
Vertical margin in Pixels
<div class="m-y-40-px">
<p>Vertical margin of this div element is 40px.</p>
</div>
</div>
Vertical margin of this div element is 40px.
Margin in percentage
<div class="m-10-pr">
<p>Margin of this div element is 10%.</p>
</div>
</div>
Margin of this div element is 10%.
Top margin in percentage
<div class="m-t-10-pr">
<p>Top margin of this div element is 10%.</p>
</div>
</div>
Top margin of this div element is 10%.
Bottom margin in percentage
<div class="m-b-10-pr">
<p>Bottom margin of this div element is 10%.</p>
</div>
</div>
Bottom margin of this div element is 10%.
Left margin in percentage
<div class="m-l-10-pr">
<p>Left margin of this div element is 10%.</p>
</div>
</div>
Left margin of this div element is 10%.
Right margin in percentage
<div class="m-r-10-pr">
<p>Right margin of this div element is 10%.</p>
</div>
</div>
Right margin of this div element is 10%.
Horizontal margin in percentage
<div class="m-x-10-pr">
<p>Horizontal margin of this div element is 10%.</p>
</div>
</div>
Horizontal margin of this div element is 10%.
Vertical margin in percentage
<div class="m-y-10-pr">
<p>Vertical margin of this div element is 10%.</p>
</div>
</div>
Vertical margin of this div element is 10%.
Designed and maintained with by Sunil
Source code licensed under MIT
Website content & documentation licensed under CC BY-NC-SA 4.0
This work is licensed under a Creative Commons Attribution 4.0 International License.