The padding is affected by the background color of the element. You can set the padding of an element using the shorthand padding property, or you can set the padding for each side individually.
Padding Property (Shorthand)
When using the shorthand padding property, set the values as follows: top, right, bottom, and left. For example: If you want to apply the same padding to all four sides, you just use one value: If you want the padding to be the same for the top/bottom and left/right, you use two values: Using three values, you will set the left and right padding the same, while setting the top and bottom with different values: If the padding is set to zero, then it has the same edge as the element. You should note that padding can be set using a non-negative value. You can specify the measurement as px, pt, em, in, cm, etc. You can also specify a percentage for your padding, which will be a percentage of the width of the element’s containing block.
Padding Individual Sides
As mentioned earlier, in CSS, it is possible to specify different padding values for each side of the HTML element:
