Marusya's School Notes

Padding-Bottom

This example demonstrates how to set the bottom padding of a <p> element.

HTML file:	Displayed by browser:
<style> p.padding { padding-bottom:2cm; } p.padding2 { padding-bottom:25%; } </style> <body> <p>This is a text with no bottom padding. This is a text with no bottom padding. This is a text with no bottom padding.</p> <p class="padding">This text has a bottom padding of 2 cm. This text has a bottom padding of 2 cm. This text has a bottom padding of 2 cm.</p> <p class="padding2">This text has a bottom padding of 25%. This text has a bottom padding of 25%. This text has a bottom padding of 25%.</p> </body>	This is a text with no bottom padding. This is a text with no bottom padding. This is a text with no bottom padding. This text has a bottom padding of 2 cm. This text has a bottom padding of 2 cm. This text has a bottom padding of 2 cm. This text has a bottom padding of 25%. This text has a bottom padding of 25%. This text has a bottom padding of 25%.

HTML file:

Displayed by browser:

<body>
<p>This is a text with no bottom padding. This is a text with no bottom padding. This is a text with no bottom padding.</p>
<p class="padding">This text has a bottom padding of 2 cm. This text has a bottom padding of 2 cm. This text has a bottom padding of 2 cm.</p>
<p class="padding2">This text has a bottom padding of 25%. This text has a bottom padding of 25%. This text has a bottom padding of 25%.</p>
</body>

This is a text with no bottom padding. This is a text with no bottom padding. This is a text with no bottom padding.

This text has a bottom padding of 2 cm. This text has a bottom padding of 2 cm. This text has a bottom padding of 2 cm.

This text has a bottom padding of 25%. This text has a bottom padding of 25%. This text has a bottom padding of 25%.