How to use CSS Padding. CSS Padding defines a space between the outer content section and inside the edge area. In other words, it assists in adding an extra few spaces. In this article, we shall learn about padding and its performance and how they have essentially performed in CSS methods. to understand the best result.
The Padding is clearly considered by the background color of the specified box model. Truly, expressing when you define a box the padding has different four sides of an element particularly: the padding-top, padding-right, padding-left, padding-bottom. Padding follows the Stenotype property and is effective while setting the values unusually the default value is assigned ‘0’. And the scheme personally likes the margin element and works well with border property. In the box- model padding includes in the third segment below the border area.
Read Also: Wrap CSS text
Padding rules in CSS.
If one value per property is been set then it is seized in the following way:
How to use CSS Padding
padding: top, right, bottom, left.
So that all the types are assumed the same value on all the surfaces. For instance, if the value is 20px, this sets all padding values to the properties:
Read Also: CSS Box-Sizing
<style> padding 20px /*TOP*/ 30px /*Right*/ 40px /*Bottom*/ 50px /*Left*/ padding-top: 20px; padding-right :30px; padding- bottom:40px; padding- left :50; </style>
Example:
<h2>How to use CSS Padding</h2>
<style type="text/css">
h2{
background: cyan;
padding: 20px;
box-shadow: 4px 4px 4px #000, -4px -4px 4px;
border: 5px solid #eee;;
overflow-wrap:normal;
}
</style>In above example, we used padding: 20px. It will increase space size for all top, right, bottom, and left.
Have a nice day.