HTML and CSS Reference
In-Depth Information
Figure 9-3
Two block elements with a default width of 100% and specified height of 40px.
This display properties demonstration page can be found in the project files ch09-00, named display-property-
demo.html
On the Cool Shoes & Socks page at present, the Sign Up button in the newsletter box is an inline-block element.
While the margin top value of
2em
and margin bottom value of
1em
of the Sign Up button are being rendered, the
margin left and right value of
auto
are not. The reason is that inline and inline-block elements don't have a defined
width; they are simply the width of their contents—more on this shortly. So, when the browser sees that margin left
and right value of
auto
, it can't determine the unused space around that element because it doesn't know how wide
that element is, and as such, the button doesn't get centered. To work around that problem, make the Sign Up button
block-level instead:
1.
In styles.css, find the rule set for
input[type=”submit”][class=”button”]
and add the follow-
ing declaration:
display: block;
2.
Save styles.css.
