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-
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.
Search WWH ::

Custom Search