CSS Padding

The padding property is used to define the space between the content and the border of the element. It clears an area around the content unlike margins which clears the area around the element.

You can change the padding of an element one by one for each side or can give all at once using shorthand property.


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Padding </title>
<meta charset="UTF-8">
</head>
<style>
p{
border: 1px solid black;
background-color: #a78f3d;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>
<body>
<h2>Using individual padding properties</h2>
<p>This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px,
and a left padding of 80px.</p>
</body>
</html>

Output

CSS Padding Examples

This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, and a left padding of 80px.


Padding Shorthand Properties


If four values are given: If three values are given:
padding: 25px 50px 75px 100px; padding: 25px 50px 75px;
top padding is 25px top padding is 25px
right padding is 50px left and right paddings are 50px
bottom padding is 75px bottom padding is 75px
left padding is 100px
If two values are given: If one value are given:
padding: 25px 50px; padding: 25px;
top and bottom paddings are 25px all four paddings are 25px
left and right paddings are 50px




Color Picker

List of color names supported by all browser »



Character Code

List of character codes to display special character »



Language Code

List of all language supported by all browser »



Country Code

List of Country code supported by all browser »

Latest Updates

PHP Introduction

How to Run a PHP program in Xampp?

How can I create a phpinfo.php page?

How to Define a Variable in PHP

PHP Echo and Print Statements

Working with PHP Operators

Understanding the PHP Data Types

How to Write Comments in PHP

How to Define a Constant in PHP

PHP if...else...elseif Statements