PADDING

CSS PADDING

• Padding indicates the distance

between contents of a cell and the
border around it.
• Padding in HTML works only on
tables while padding provided by CSS
can be used on other elements as
well (paragraphs, headings, images,
ACTIVITY
CSS PADDING
PROPERTY
Property Definition Values
Name
Padding-top: Indicates distance between the <value> any
contents and the top border. number
ex.: padding-top: 12% followed by
px (for size in
pixels) or %
Padding- Indicates distance between the <value> any
bottom: contents and the bottom border. number
ex.: padding-bottom: 12px followed by
px (for size in
pixels) or %
Padding-left: Indicates distance between the <value> any
contents and the top border. number
ex.: padding-left: 12% followed by
px (for size in
pixels) or %
Property Definition Values
Name
Padding- Indicates distance <value> any
right: between the contents number
and the right border. followed by
ex.: padding-right: px (for size in
12% pixels) or %
Padding: Indicates distance <top>
between the contents <right>
and the border <bottom>
around it. The values <left>
separated by spaces, number of
indicate distances in pixels or
clockwise direction number
starting from the top expressed as
(top, right, bottom, percent.
then left).
ex.: padding: 2px
 Setthe
Set thetop
toppadding
paddingof
of<p>
<p>
to “50px".
to “50px".
 Usethe
Use thepadding
paddingproperty
propertytotoset
set
thetop
the topand
andbottom
bottompaddings
paddings
for<p>
for <p>toto"25px",
"25px",and
andleft
leftand
and
rightpaddings
right paddingstoto"50px".
"50px".