Padding
Padding is transparent space surrounding content area. Padding space around the content can be specified by using padding property.
CSS gives control to the user to set different padding values on each side using the padding-top, padding-right, padding-bottom, padding-left properties
Sample Code
h1{ padding-top:14px; padding-bottom:10px; padding-left:20px; padding-right:40px; background-color:red; }
Try it yourself
<html> <head> <style> h1{ padding-top:14px; padding-bottom:10px; padding-left:20px; padding-right:40px; background-color:red; } </style> </head> <body> <h1>A sample of padding </h1> </body> </html>
The Padding property can be used as a short hand method for specifying the padding values of a n element
Sample code
h1{padding:2cm 4cm 2cm 4cm;}
The order of values for padding is: padding-top,padding-right,padding-bottom,padding-left
If all the padding values are same then user can specify it in the following way
h1{padding:10px;}