CSS padding property id used to create space around the content of an HTML element. Padding can be set to any side of an element by using the following properties.
- padding-top
- padding-bottom
- padding-left
- padding-right
The padding of an element can be specified in px, cm, mm or %. If you specify padding for an element, the total width of the element will be padding + specified width of the element.
margin-top:2px;
margin-bottom:3cm;
Example
<html>
<head>
<title>CSS Padding<title>
<style>
h2{
padding-top:2cm;
padding-left:1cm;
padding: 1px solid green;
}
<style>
</head>
<body>
<h2>CSS Padding</h2>
</body>
</html>CSS Padding
Shorthand property
Instead of specifying the four padding properties as separate properties, you can specify them as a single property called padding.
Example
padding: 10px 12px 15px 8px;
This is same as:
padding-top:10px;
padding-right:12px;
padding-bottom:15px;
padding-left:8px;Specifying values
| Method | Description |
| padding: 2px; | This will set: padding -top:2px; padding -right:2px; padding -bottom:2px; padding -left:2px; |
| padding: 1px 2px; | This will set: padding -top:1px; padding -right:2px; padding -bottom:1px; padding -left:2px; |
| padding : 1px 2px 3px; | This will set: padding -top:1px; padding -left:2px; padding -right:2px; padding -bottom:3px; |
