css padding

the css padding properties is used to set the space between the element border and content.

padding

the padding properties define space between the content of an element and its border.

the padding values cannot be negative.

it initial values is zero(0px).

you can set different values for the padding on each side of the box using the following properties.

  • padding defines all padding properties in one statement.
  • padding-top -specifies the top padding of an element.
  • padding-bottom -specifies the bottom padding of an element.
  • padding-left -specifies the left padding of an element.
  • padding-right -specifies the right padding of an element.

using css, it is possible to define different padding of an different sides of an element.

              <html>
              
                <head>
                
         <style type="text/css">
         
 p.one { padding-top:20pxpadding-right:60pxpadding-bottom:20px; 
 
                                                                  padding-left:30px; }
              
 p.two { padding-top:80pxpadding-right:10pxpadding-bottom:0px; 
 
                                                                  padding-left:80px; }
              
 p.three { padding-top:40pxpadding-right:6pxpadding-bottom:5px;
 
                                                                  padding-left:300px; }
              
         </style>
         
      </head>
      
    <body>
    
 <div style="border:1px solid red;width:640px;height:300px;">
              
 <p class="one" style="border:2px solid #0c0;width:200px;height:40px;float:left;">
 
                                          show the padding   effect of an content.</p>
              
 <p class="two" style="border:2px double #3a4b9c;width:200px;height:40px;float:left;">
 
                                          show the css padding effect of an content.</p>
              
 <p class="three" style="border:2px inset #413445;height:40px;clear:both;">
 
                                          loo css padding effect of an element. </p>
              
    </div> </body> </html>

Css padding shorthand property

the 'padding' property is a shorthand property for setting paddong-top, padding-bottom,padding-left,  padding-right at one declaration statement in style sheet.

surface of the padding area is set with the 'background' property.

padding values cannot be negative.

the padding shorthand property sets all padding properties in one declaration statement. negative values are not allowed.

  • if one value is given, it applies to all four sides.
  • if two values are given,the first applies to the top-side and bottom side, and the second value applies to the right-side and left-side.
  • if three values are given, the first applies to the top, the second applies to the right and left sides, and the third applies to the bottom.
  • if four values are given,they are applied in clockwise order, starting from the top.

the css padding shorthand property syntax :-

		padding:    top-padding    right-padding           bottom-padding    left-padding ;
		padding:   top-padding    right&left-padding    bottom-padding ;
		padding:  top&bottom-padding      right&left-padding ;
		padding: padding ;
                p { padding:11px; }
                
                p{ padding:11px 21px; }
                
                p{ padding:11px 21px 31px; }
                
                p { padding:11px 21px 31px 41px; }
                

using css the padding property can have one to four values.

number of valuesdescription

one

padding:21px;

set all four paddings are 21px.

two

padding:21px 41px;

top and bottom paddings are 21px.

left and right paddings are 41px.

three

padding:21px 11px 51px;

top padding is 21px.

left and right paddings are 11px.

bottom padding is 51px.

four

padding:21px 11px 51px 31px;

top  padding is 21px.

right  padding is 11px.

bottom   padding is 51px.

right  padding is 31px.

Css Padding property more examples.

propertydescription
paddingsets all padding properties in one declaration statement.
padding-topsets the top padding of an element.
padding-bottomsets the bottom padding of an element.
padding-leftsets the left padding of an element.
padding-rightsets the right padding of an element.