HTML and CSS Reference
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:
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-
Figure 9-4 Two inline elements among two block elements.