CSS Padding
CSS Padding with all Programming Examples.
In this tutorial we will learn CSS Padding with all programming examples and their outputs. Padding is use to create space around an element’s content, inside of border.
CSS Padding
CSS Padding is use to create space within an element. It clears an area around the inside of an element. With uses of padding, we create and full control over the padding of any defines elements, we can put padding each side of element such as (top, bottom, right and left).
CSS Padding – Individual Sides
We use padding any and each individual sides of an element, bellow the following properties set the length of the padding on each side.
- padding-right: Uses of this property to set the padding area on right side of an element.
- padding-left: This property is used to set the padding area on left side of an element.
- padding-top: Uses of this property to set the padding area on top of an element.
- padding-bottom: This property is used to set the padding area on bottom of an element.
Valid value to put padding on element.
- <length>: It is specifies put padding by length such as px, cm, mm, pt etc. For example; p{padding:10px;}.
- <percentage>: It sacrificing a padding in percentage (%) of the width of the containing element. For example; p{padding:20%;}.
- Inherit: It specific that the padding should be inherited from the parent element.
- auto: It specific to set the padding on element automatically.
- unset: Unset property defines to no padding, not set the padding on element.
Here we are seeing the example of all padding length each side, programming example with output.
Programming Example of Padding;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Padding</title> <style type="text/css"> .top-padding{padding-top: 30px; border: 1px solid red; background: antiquewhite;} .bottom-padding{padding-bottom: 30px; border: 1px solid green; background: aquamarine;} .left-padding{padding-left: 40px; border: 1px solid deeppink; background: lightsalmon;} .right-padding{padding-right: 40px; border: 1px solid deepskyblue; background: lightpink;} </style> </head> <body> <div class="top-padding">Here we used padding on top side, 30px.</div> <div class="bottom-padding">Here we used padding on bottom side, 30px.</div> <div class="left-padding">Here we used padding on left side, 40px.</div> <div class="right-padding">Here we used padding on right side, 40px.</div> </body> </html> |
Output of above programming example;
 |
Above you can see the programming output, here we use each side padding (top, bottom, left and right). We take padding area on top 30px, on bottom 30px, on left side 40ps and right side we take padding are 40px.
Padding & Width
Here we use the width padding, The CSS width property only specific the width of an element’s content area. It does not include padding, border and margin. Therefore, if an element has a specified width and padding, they will be added together.
Example of Padding Width,
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Padding</title> <style type="text/css"> div{width: 100px; padding: 50px; border: 1px solid red; background: antiquewhite;} </style> </head> <body> <div>Here we used padding width 50px, It used all side of div.</div> </body> </html> |
Output of above programming example padding width.
 |
Above you can see the output of programming example, we taken 100px width and padding 50px, it is maintaining each sides padding area of the division (box). It takes padding and width together. Here the actual width of the element id still 100px and padding is 50px.
Padding & Height
The CSS height property only specifies the height of an element’s content area. It does not include padding, border and margins. Therefore, if and an element has a specified height and padding they will be added together.
Programming Example,
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Padding</title> <style type="text/css"> div{height: 100px; padding: 40px; border: 2px soliddarkviolet ; background: lightgreen;} </style> </head> <body> <div>Here the actual height of element is now 140px. Beacuse here automatically added the value of padding in height. </div> </body> </html> |
Output of above example padding height,
 |
Above you can see the programming example of padding height, here padding value is automatically added together height value, with double padding value. And the padding is still 40px.
To keep the height 100px same value we need to set the box-sizing property to
border-box. Here increasing the padding will now decrease the content space inside the element. Look below programming example.
Example of box-sizing property;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Padding</title> <style type="text/css"> div{height: 100px; padding: 40px; box-sizing: border-box; border: 2px solid darkviolet ; background: lightgreen;} </style> </head> <body> <div>Here the actual height of element is now 140px. Beacuse hereautomatically added the value of padding in height. </div> </body> </html> |
Output of above programming example,
 |
Above output of programming example, you can see the text is out of box because here the actual rendered height of the box is still 100px, the value of padding not added here, and you see the padding value is also still 40px.
Here padding value is not double added with height because we use, box-sizing: border-box;so that padding value is not added with height.
CSS Padding – Shorthand Property
The padding CSS property is a shorthand for the below following properties. We can put the one, two, three or four CSS padding property value in one element. You can see below programming example how to put different value in an element.
- padding-top
- padding-bottom
- padding-right
- padding-left
The padding CSS property can have one, two, three or four value, how can we do it below definition.
- When we put one value, it applies the same padding area to all four side of an element. For example; padding: 20px;
- When we put two values are specified, the first value applies to the top and bottom, and the second to the left and right. For example; padding: 20px 40px;
- When three values are specified, the first value applies to the top, the second value applies in left and the third value is on the bottom. For example; padding: 20px 10px 30px;
- When we put four values are specified, the paddings apply all the four sides of an element (top, bottom, left and right). For example; padding: 10px 20px 30px 40px;
Now we see the example of padding using all sides of an elements putting different values above you cans learn same as.
Example;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Padding</title> <style type="text/css"> .one{padding: 20px; background: lightgreen; border: 1px solid red;} .two{padding: 20px 40px; background: lightsalmon; border: 1px solid green;} .three{padding: 20px 10px 40px; background: lightpink; border: 1px solid blue} .four{padding: 10px 20px 30px 40px; background: lightskyblue; border: 1px solid darkviolet} </style> </head> <body> <p class="one">Welcome our website <b>"StudyMuch"</b> and learn coding.</p> <p class="two">Welcome our website <b>StudyMuch</b> and learn coding.</p> <p class="three">Welcome our website <b>StudyMuch</b> and learn coding.</p> <p class="four">Welcome our website <b>StudyMuch</b> and learn coding.</p> </body> </html> |
Output of above programming example.
  |
Above you can see the programming example output, we put different padding area one value, two value, three value and four value in an element. It is easy to add different value in an element you see the programming above you to but padding each side.
In this tutorial we learned CSS Padding with different value putting width, height and all four side with all programming examples and output of program. In next tutorial we will learn a new topic of CSS.
Also Read-
3 Comments
gallantly · December 9, 2022 at 5:58 pm
Thanks for the aᥙspicious writeup. It in fact
used to be a enjoyment account it. Look complicateԀ to far brouցht agreeable from ʏou!
Howevеr, how can we ϲommunicate?
Создать бесплатный аккаунт · April 13, 2023 at 3:04 am
Your point of view caught my eye and was very interesting. Thanks. I have a question for you.
gate.io türkiye · May 7, 2023 at 6:23 am
After reading your article, it reminded me of some things about gate io that I studied before. The content is similar to yours, but your thinking is very special, which gave me a different idea. Thank you. But I still have some questions I want to ask you, I will always pay attention. Thanks.