HTML and CSS Reference
In-Depth Information
Figure 9-6
The navigation links positioned inline.
inline-block
Sometimes you might want an element to be inline but still give it dimensional values such as height and margin.
These types of elements can be given the declaration
display: inline-block;
.
In Figure 9-7, I added two inline-block elements to a page. These properties take on attributes of both inline-level
and block-level elements. First, they take on an inline-level, being positioned next to each other. Unlike inline-level
elements, though, they are then formatted as a block-level, allowing them to be given dimensional properties. As you
can see, these inline-block elements have taken on the height declaration of 40px, just like the block-level elements
have.
Figure 9-7
Inline-block elements in relation to block and inline elements.
Aside from the height and margin of the inline-block elements, can you see what else is different about them when
compared to the inline-level elements? Inline-block elements are horizontally separated by 4 pixels of white space.
This is an intended behavior although, admittedly, an annoying one! I show you how to fix this behavior in a mo-
ment.
