CSS Padding Code Tutorials

How to set the bottom padding using percent values in CSS

The code below shows you how to set the bottom padding using percent values in CSS.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Web Development Tutorials.com</title>

<style type="text/css">
p.one
{
padding-bottom: 25%;
border-style: solid;
}
</style>

</head>
<body>
<p class="one">
This paragraph has a bottom padding of 25%. This paragraph has a bottom padding of 25%. This paragraph has a bottom padding of 25%. This paragraph has a bottom padding of 25%.
</p>
</body>
</html>

The code above creates the paragraphs below.

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

Use the text editor below to practice what you have learned.