Layout Techniques - Jump Start CSS - page 30

Asmentioned,blockelementsarestructural-typeelementsandsowill,bydefault,startbelow
the elements on the page that appear before them in the HTML. This is an important part of
understanding how they differ from inline elements.
In essence, inline elements behave like words and letters within of a paragraph. As you can
seein Figure 2.2 ,aninlineelementwillflownaturallywithtext,andusuallyit'llcontainnoth-
ing but text or other inline elements. It's worth noting that inline elements are subject to CSS
properties that affect text. For example, line-height and letter-spacing are CSS properties that
can be used to style inline elements. However, those same properties wouldn't affect block
elements.
Additionally, inline elements can't have specified width and height values, and they'll ignore
top and bottom margins. That said, they can accept left and right margin values as well as any
padding.
For reasons concerned with layout, you'll occasionally want to have something that some-
what resembles both block and inline. This is possible by setting an element to a value of
inline-block , which you can do as follows:
.example {
display: inline-block;
}
This gives us the best of both worlds—allowing the element to stay inline with text, and still
be subject to text-based CSS, while at the same time accepting width, height, and margin val-
ues like a block element. Later in this chapter, we'll use inline-block to style the main navig-
ation of our example site.
Shorthand versus Longhand CSS
Yet another important concept to understand is the difference between shorthand and
longhand CSS properties. As we've already discussed, a single CSS declaration usually con-
sists of a property followed by a colon, followed by a value, then a semi-colon.
Shorthand properties work a bit differently. A shorthand property's value is actually a set of
values, each of which maps to an existing CSS longhand property. Let's look at an example
that we've already introduced—the border property: