Learn CSS Padding




In CSS3 we use the Padding property to set the padding area of an element, we can also control each side of the element using, padding-bottom, padding-top, padding-right, and padding-left, CSS Padding values are set using lengths or percentages,


In CSS the default value for padding property is 0.


In CSS3, you have full control over the padding.


In CSS there are 4 properties that define the padding of each side of an element:


  • padding-bottom
  • padding-top
  • padding-right
  • padding-left



This container has a padding of 20px


Code Example:


            <style>
      .container-1
       {
  padding:20px;
}
</style>

<div class="container-1"><p>  This container has a padding of 20px</div>
 
  



You can also style the container controling all four sides of it:


This container is controled by four padding properties



Code Example:


            <style>
      .container-2
       {
  padding-top: 50px;
  padding-bottom: 50px;
  padding-right: 30px;
  padding-left: 100px;
}
</style>
<div class="container-2"><p>This container is controled by four padding properties</p></div>

 
  
Try yourself >>





CSS Padding - Shorthand Property


Modern CSS allow us to be efficient and use the CSS Padding - Shorthand Property


This is the default order of the CSS Padding - Shorthand Property from top to bottom:


  • top
  • right
  • bottom
  • left

Code Example:


            <style>
      .container-3
       {
        padding: 30px 50px 60px 100px;
}
</style>
<div class="container-3"><p>Container text</p></div>

 
  
Try yourself >>

In this case padding-top property will be 30px, padding-right property will be 50px, padding-bottom property will be 60px, padding-left property will be 100px :



However if you define only two properties, the browser will apply them to all four sides of the element:


Code Example:


            <style>
      .container-3
       {
        padding: 30px 50px;
}
</style>
 
  

In that case, top and bottom paddings are 30px


And, right and left paddings are 50px



If you define one property only, all four sides will have the same value:


Code Example:


            <style>
      .container-3
       {
        padding: 30px;
}
</style>
 
  





Adding CSS Padding to an element with Width


If you have already set width value to an HTML element, the padding will be added to the total width of the HTML element.


Code Example:


            <style>
      .container-1
       {
        width: 250px;
       padding: 50px;
}
</style>

 
  
Try yourself >>

In this example the width of the container will be 350 pixels, 250 base width + 50px of right padding and 50px of left padding.




Use the box-sizing property to keep the width value the same as you set it


Code Example:


            <style>
      .container-1
       {
        width: 250px;
  padding: 50px;
  box-sizing: border-box;
}
</style>

 
  
Try yourself >>







learn css tutorial in 1 day, you are in the right place to learn css step by step, FreeCodeWiki is one of the best css learning websites for free.



Navigation