Padding in getcss

Padding

Padding properties of an element can be set with different padding classes.

Padding of an element can be set in pixels or in percentage.

Padding in pixels

Padding 20px

<div class="p-20-px">
<p>Padding of this div element is 20px.</p>
</div>

Padding of this div element is 20px.

Padding 50px

<div class="p-50-px">
<p>Padding of this div element is 50px.</p>
</div>

Padding of this div element is 50px.

Top padding in pixels

<div class="p-t-30-px">
<p>Top padding of this div element is 30px.</p>
</div>

Top padding of this div element is 30px.

Bottom padding in pixels

<div class="p-b-80-px">
<p>Bottom padding of this div element is 80px.</p>
</div>

Bottom padding of this div element is 80px.

Left padding in pixels

<div class="p-l-60-px">
<p>Left padding of this div element is 60px.</p>
</div>

Left padding of this div element is 60px.

Right padding in pixels

<div class="p-r-100-px">
<p>Right padding of this div element is 100px.</p>
</div>

Right padding of this div element is 100px.

Horizontal padding in pixels

<div class="p-x-80-px">
<p>Horizontal padding of this div element is 80px.</p>
</div>

Horizontal padding of this div element is 80px.

Vertical padding in pixels

<div class="p-y-40-px">
<p>Vertical padding of this div element is 40px.</p>
</div>

Vertical padding of this div element is 40px.

Padding in percentage

<div class="p-10-pr">
<p>Padding of this div element is 10%.</p>
</div>

Padding of this div element is 10%.

Top padding in percentage

<div class="p-t-15-pr">
<p>Top padding of this div element is 15%.</p>
</div>

Top padding of this div element is 15%.

Bottom padding in percentage

<div class="p-b-20-pr">
<p>Bottom padding of this div element is 20%.</p>
</div>

Bottom padding of this div element is 20%.

Left padding in percentage

<div class="p-l-20-pr">
<p>Left padding of this div element is 20%.</p>
</div>

Left padding of this div element is 20%.

Right padding in percentage

<div class="p-r-20-pr">
<p>Right padding of this div element is 20%.</p>
</div>

Right padding of this div element is 20%.

Horizontal padding in percentage

<div class="p-x-20-pr">
<p>Horizontal padding of this div element is 20%.</p>
</div>

Horizontal padding of this div element is 20%.

Vertical padding in percentage

<div class="p-y-20-pr">
<p>Vertical padding of this div element is 20%.</p>
</div>

Vertical padding of this div element is 20%.

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.

getcss

Become a patron, sponsor, or backer!

Support getcss