HTML and CSS Reference
In-Depth Information
The
padding
property, unlike the
margin
property, works vertically on inline-level ele-
ments. This vertical
padding
may blend into the line above or below the given element,
but it will be displayed.
Margin & Padding on Inline-Level Elements
Inline-level elements are affected a bit differently than block and inline-block ele-
ments when it comes to margins and padding. Margins only work horizont-
ally—
left
and
right
—on inline-level elements. Padding works on all four
sides of inline-level elements; however, the
vertical
padding—the
top
and
bottom
—may bleed into the lines above and below an element.
Margins and padding work like normal for block and inline-block elements.
Margin & Padding Declarations
In CSS, there is more than one way to declare values for certain properties. We can use
longhand, listing multiple properties and values one after the other, in which each value has
its own property. Or we can use shorthand, listing multiple values with one property. Not
all properties have a shorthand alternative, so we must make sure we are using the correct
property and value structure.
The
margin
and
padding
properties come in both longhand and shorthand form. When
using the shorthand
margin
property to set the same value for all four sides of an element,
we specify one value:
1.
div {
2.
margin:
20px
;
3.
}
To set one value for the
top
and
bottom
and another value for the left and right sides of
an element, specify two values:
top
and
bottom
first, then
left
and
right
. Here we
are placing margins of
10
pixels on the
top
and
bottom
of a
<div>
and margins of
20
pixels on the
left
and
right
:
1.
div {
2.
margin:
10px 20px
;
3.
}
To set unique values for all four sides of an element, specify those values in the order of
top
,
right
,
bottom
, and
left
, moving clockwise. Here we are placing margins of
10
pixels on the
top
of a
<div>
,
20
pixels on the
right
,
0
pixels on the
bottom
, and
15
pixels on the
left
.
Search WWH ::
Custom Search