Prev Next

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;}

Leave a Comment