Padding
Understanding Padding
Padding creates space between the content of an element and its border.
It affects the element's box size, increasing the area that the background covers.
Padding can be set on all sides of an element: top, right, bottom, and left.
Supports individual side adjustments or simultaneous, symmetrical settings.
Does not affect the element's position relative to others but affects surrounding layout spacing.
Any number
px
Pixels - a fixed unit of measurement.
Any number
rem
Relative to the font-size of the root element.
Any number
%
Percentage - relative to the width of the containing element.
Any number
vw
Relative to 1% of the width of the viewport.
N/A
initial
Resets the padding to the browser’s default value.
N/A
inherit
Inherits the padding value from the parent element.
N/A
unset
Removes any set padding, reverting to inherited if possible, otherwise to the initial value.
Example
lets demonstrate padding with a card example, we have designed a blog card. Initially without padding it is looking like:
Now, we have applied the following padding to the parent block container
Last updated