HTML and CSS Reference
In-Depth Information
Now the Sign Up button is block-level, the margin declaration
margin: 2em auto 1em;
takes full effect, and
the button is horizontally centered relative to the newsletter box.
Code Challenge: Make the Newsletter Labels Block-level
In styles.css, do the following:
Add a new rule set for
label
below the
#newsletter label
rule set with the declaration
display:
block;
.
inline
An element with the declaration
display: inline;
is only the size of the content it contains and positions itself
inline, meaning it doesn't attempt to push itself away from, or below other elements.
In Figure 9-4, I placed two inline-level elements in between two block elements. Because the element above the
inline-level elements is a block, it can't have elements to its side, so the inline elements are placed below it. The in-
line elements don't form new blocks, so they sit side by side and are only as wide as the contents they contain. Be-
cause of this, properties that affect the layout of an element can't be used on inline elements, such as
width
,
height
, and
margin
. In Figure 9-4, each element has a height of 40px, but this is ignored for the inline-level ele-
ments.
Figure 9-4
Two inline elements among two block elements.
