The padding property sets the padding from the border of an element to its inner content. Like the margin property, CSS has four properties that set the margin for each side:
- padding-top : top padding
- padding-bottom : bottom padding
- padding-left : left padding
- padding-right : padding on the right
For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box model in CSS3</title>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
To set the padding value, as in margin, either specific values in pixels or percentage values (relative to the size of elements) can be used.
You can also use the abbreviation to record indents:
padding: top_padding right_padding bottom_padding left_padding;
For example:
div.outer{
margin: 25px
padding: 30px 25px 35px 28px;
border: 2px solid red;
}
If all four values match, then you can write only one value for all indents:
div.outer{
margin: 25px
padding: 30px
border: 2px solid red;
}