Padding
Padding helps us to create space around the elements. Each side of an element can be padded using CSS properties: padding-top padding-right, padding-left, and padding-bottom.
- padding-top
- padding-right
- padding-bottom
- padding-left
Here’s how padding property should be coded in CSS:
Padding can be implemented using one, two, three, or four values. The value can be a pixel or percentage. However, negative values are not allowed in padding.
- Padding property with one value:
It means that all the four sides of the element will have same padding, and it should be codes as below:
padding: 35px;
- Padding with two values:
The first value denotes the top & bottom paddings, and the second value denotes the right and left paddings.
padding: 35px 50px;
- Padding with three values:
The first value is for top padding, second value is for right and left paddings, and the third value denotes the bottom padding.
padding: 40px 60px 25px;
- Padding with four values:
Each value takes each side of the element.
Padding: 50px 45px 40px 30px;
Top padding is 50px, right padding is 45px, bottom padding is 75px, and left padding is 100px
Example:
<![CDATA[
<!DOCTYPE html>
<html>
<html lang="en-US">
<style>
div {
border: 1px solid black;
background-color: lightblue;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>
<body>
<h2>Knowledge2life</h2>
<div>Online learning website.</div>
</body>
</html>]]>
OUTPUT:
Knowledge2life
Online learning website.
