How to Apply Padding with CSS

  • google plus

In Brief...

The padding property is used to specify the padding between an element's edges and its content. It can be applied to both block and inline elements. Padding can be specified in number of units (e.g., 20px) or in percentage of the width of the containing element. Learn how to apply padding with CSS below.

Take our Introduction to CSS Training course for free.

See the Course Outline and Register

Instructions

Start with a standard HTML document, then add the div tags with the style information in them, like so:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Padding</title>
</head>
<body>
<h1>CSS Padding</h1>
<div style="background-color: #0066ff; border: 5px solid #ff99ff; padding: 0px;">
	<div style="background-color: #ff6600; border: 2px solid black; 
		margin: 0px; padding-top: 30px; padding-right: 30px; 
		padding-bottom: 30px; padding-left: 30px;">
			padding-top: 30px;<br>
			padding-right: 30px;<br>
			padding-bottom: 30px;<br>
			padding-left: 30px;
	</div>
</div>
<hr>
<div style="background-color: #0066ff; border: 5px solid #ff99ff; padding: 0px;">
	<div style="background-color: #ff6600; border: 2px solid black; margin: 0px; padding: 30px;">
		padding: 30px;
	</div>
</div>

</body>
</html>

This code renders the following:
Padding

Author: Chris Minnick

Chris is a prolific author and trainer, and the CEO of WatzThis?. His published books include Writing Computer Code, JavaScript for Kids, Coding with JavaScript For Dummies, Beginning HTML5 and CSS3 For Dummies, Webkit For Dummies, CIW eCommerce Certification Bible, and New Riders' XHTML.

Discuss