CSS Padding Code Tutorials

How to set the top padding using percent values in CSS

The code below shows you how to set the top 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-top: 25%;
border-style: solid;
}
</style>

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

The code above creates the paragraphs below.

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

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