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