Padding is the spacing surrounding the edge of an element's content area. If the element has a border, then padding comes between the inner edge of the border and the outer edge of the content area. An element's background image or background color, will extend into the padding.
Unlike margins, when the padding of two elements come into contact, they do not collapse.
Padding can be applied to any element. It can accept length values,
percentage values and the keyword inherit
. Percentage values refer
to the width of the containing block. Unlike margins, padding cannot be
negative.
There are five padding properties: padding
, padding-top
,
padding-right
, padding-bottom
and padding-left
.
The padding property can take up to four space separated values. With four
values, the padding lengths specified are the top, right, bottom and left
padding, in that order. With three values, the padding lengths specified are
top, right and left together, and bottom, in that order. With two values, the
padding lengths specified are top and bottom together and the right and left
together. With one value, all the sides get the same padding.
padding
with px
values
Padding can be specified in px
as shown in the example below.
Example 1: <p style="font-size:35px;font-family:'Times New Roman';padding:10px;"><span>the quick brown fox</span>
jumps over the lazy dog, the five boxing wizards jump quickly</p>
As can be seen in the example above, since is English is a left-to-right language, the space at the end of each sentence may be greater than the padding because when a word does not fit at the end of a line, the browser puts it in the next line. However, the space on the left, top and bottom always remains the same.
When padding overflows an element, it behave the same as content area that has overflowed. Therefore, when padding overflows the viewport, the browser puts a horizontal scroll bar which enables it to be viewed.
padding
with percentage values
A padding
declaration with percentage values refers to the width
of the containing block. Note that even top and bottom padding specified in
percentages refer to the width of the containing block.
Example 2: <div
style="font-size:35px;font-family:'Times New Roman';width:600px;border-width:5px;border-style:solid;padding:0;margin:0"><p
style="padding:10%">the quick brown fox jumps over the lazy dog. the five boxing
wizards jump quickly</p></div>
When an element has an inline element as its parent, percentage padding will depend not on the width of its parent (which is an inline element) but on the width of the ancestor block element.
padding
with em
values
A padding
declaration with em values refers to the font size of
the element to which the padding
declaration applies.
Example 3: <p style="font-family:'Times New Roman';font-size:20px;padding:2em">the quick brown fox
jumps over the lazy dog. the five boxing wizards jump quickly</p>
Padding on Inline Non-Replaced Elements
Padding can be applied to inline non-replaced elements such as spans. Left and right padding on inline non-replaced elements is allocated horizontal space and therefore "pushes" adjacent content away. However, top and bottom padding on inline non-replaced elements is not allocated space and may therefore overlap content above and below an element.
Example 4: <p style="font-size:35px;font-family:'Times New Roman';" >the quick brown fox j<span
style="padding:20px">u</span><span style="padding:10px">m</span>ps over the lazy
dog</p>
Note that left and right padding on a span (or other inline element) containing more than one line of text appears only at the beginning and end of the span (or inline element).
Padding on Inline Replaced Elements
Padding applied to inline replaced elements such as images behaves differently from padding on inline non-replaced elements. The main difference is that space is allocated to both top and bottom padding and left and right padding. Also, the outer edge of bottom padding will be on the baseline of the element.
Example 5: <p style="font-size:35px;font-family:'Times New Roman';" >the five boxing wizards jump quickly. the quick brown
f<img src="20x50.jpg" alt="20x50.jpg"
style="background-color:blue;padding:10px">ox jumps over the lazy dog</p>
Specifying padding on individual sides of an element
Padding can be specified individually on an element using the
padding-top
, padding-right
, padding-bottom
and
padding-left
properties and by putting multiple (upto 4) values on
a padding
declaration.
Example 6: <p
style="font-size:35px;font-family:'Times New Roman';padding-top:10px;padding-right:20px;padding-bottom:30px;padding-left:40px">the
quick brown fox jumps over the lazy dog. a b c d <span>the five boxing wizards
jump quickly</span></p>
The same effect can also be achieved using the shorthand padding
property with four values:
Example 7: <p style="font-size:35px;font-family:'Times New Roman';padding: 10px 20px 30px 40px">the quick brown fox
jumps over the lazy dog. a b c d <span>the five boxing wizards jump
quickly</span></p>
No comments:
Post a Comment