The padding property sets the paddings of an element.
div {
padding: 5px 10px 15px 20px;
}
| Property | Value | Explanation |
|---|---|---|
| padding | length, %, or auto | the top, bottom, left, and right paddings |
padding: 2px; : [all sides] paddings
padding: 2px 4px; : [top, bottom] [left, right] paddings
padding: 2px 4px 6px; : [top] [left, right] [bottom] paddings
padding: 2px 4px 6px 8px; : [top] [right] [bottom] [left] paddings

<html> <head> <title>TAG index</title> <style type="text/css"> p { width: 200px; background-color: #85b9e9; } #example1 { padding: 30px; } #example2 { padding: 10px 30px; } #example3 { padding: 0 0 0 60px; } </style> </head> <body> <p id="example1">[the padding on all sides:30px]</p> <p id="example2">[top,bottom:10px] [left,right:30px]</p> <p id="example3">[top,right,bottom:0] [left:60px]</p> </body> </html>
[the padding on all sides:30px]
[top,bottom:10px] [left,right:30px]
[top,right,bottom:0] [left:60px]