Padding

Contact Us or call 1-877-932-8228
Padding

Padding

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.

Code Sample:

BordersMarginsAndPadding/Demos/Padding.html
<!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>

The above code will render the following results:

Specifying Padding by Side

Each side of an element can have a different padding. The properties for this are listed below:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left
Next