CSS
Padding
The padding properties specify the space between the border and content.
The top, right, bottom and left padding can be changed independently using seperate properties. A shorthand padding property is also created to control multiple sides at once.
Padding Properties
The possible properties can be used for padding are as follows:
Value | Description |
---|---|
padding-top | It specifies the top padding of an element. |
padding-bottom | It specifies the bottom padding of an element. |
padding-right | It specifies the right padding of an element. |
padding-left | It specifies the left padding of an element. |
padding | It acts as a shorthand for the preceding properties. |
Padding Example
Below examples will demonstrate the basic architecture of padding
Basic Syntax:
p{
padding-top: 5%;
}
Example:
<!doctype html>
<html>
<head>
<title>...</title>
</head>
<body>
<div style="background-color: green;">
<p style="background-color: yellow; padding: 5%;">Learn CSS with PHPDocs community</p>
</div>
</body>
</html>