CSS Padding Properties Value Explanation with Example
CSS padding is work like 'top, right, bottom, left' for example 'padding: 5px' means it will work for the same for all mentioned position like top, right, bottom, and left all around of an element BUT if we use like 'padding: 5px 10px' that means 5px for top & bottom and 10px for right & left direction of an element.
Also, we can pass four different values for all direction positions for example 'padding: 5px 10px 15px 20px' means that the element will shift like 5px from top, 10px from right, 15px from bottom, and 20px from left. See below mentioned list for more properties of CSS padding and how it will work with an HTML element.
CSS padding different properties- padding [supposed, "padding:10px;" means that 10px padding work all around the element where you are going to apply this padding property.]
- padding-top ["padding-top" value is work only for the TOP position of the HTML element]
- padding-right ["padding-right" value is work only for the RIGHT position of the HTML element]
- padding-bottom ["padding-bottom" value is work only for the BOTTOM position of the HTML element]
- padding-left ["padding-left" value is work only for the LEFT position of the HTML element]
Different ways, how to pass padding property values in CSS
p {
padding: 10px; // padding 10px will work for all round position of an HTML element <p>.
}
====================
p {
padding: 10px 20px; //10px padding for top & bottom position and 20px for right & left position of an HTML element <p>.
}
====================
p {
padding: 10px 20px 30px 40px; //10px padding for top, 20px padding for right, 30px padding from bottom, 40px padding from left position of an HTML <p> element.
}
NOTE - In padding-top, padding-right, padding-bottom, and padding-left CSS property just pass only one value like 1px OR 100px what value you want in your HTML webpage.