CSS Padding property is used to define the space between the element content and the element border. The CSS padding properties are used to generate space around an element's content and inside of any defined borders.
A top, right, bottom, and left are four CSS Padding property for specifying the padding for each side of an element.
There are following CSS Padding properties to set padding around an element
- padding : It is a shorthand property for the following individual padding properties.
- padding-top : It specifies the top padding of an element.
- padding-right : It specifies the right padding of an element.
- padding-bottom : It specifies the bottom padding of an element.
- padding-left : It specifies the left padding of an element.
All the padding properties can have the following values.
- length : specifies a padding in px, pt, cm etc.its default value is 0px.
- % : specifies a padding in % of the width of the containing element.
- inherit : It is used to inherit padding from parent element.
Syntax :
padding:20px;
padding-left:20px;
padding-right:20px;
padding-bottom:20px;
If the padding property has four values,
padding: 35px 45px 55px 65px;
top padding is 35px
right padding is 45px
bottom padding is 55px
left padding is 65px
If the padding property has one values,
padding: 15px;
All top, left, right, bottom padding are 15px.
CSS padding Example :
<html>
<head>
<title>Learn Css padding tutorials by aryatechno</title>
</head>
<body>
<p style="padding:15px;border:#CC6600 solid 1px;">padding property set 15px padding.</p>
<p style="padding-left:25px;border:#CC6600 solid 1px;">padding-left property set 25px left padding.</p>
<p style="padding-right:35px;border:#CC6600 solid 1px;">padding-right property set 35px right padding.</p>
<p style="padding-top:45px;border:#CC6600 solid 1px;">padding-top property set 45px top padding.</p>
<p style="padding-bottom:25px;border:#CC6600 solid 1px;">padding-bottom property set 25px bottom padding.</p>
</body>
</html>
Output :
padding property set 15px padding.
padding-left property set 25px left padding.
padding-right property set 35px right padding.
padding-top property set 45px top padding.
padding-bottom property set 25px bottom padding.
Comments