HTML and CSS Reference
margin: 10px 20px;
In the first declaration, we're defining all four margin values explicitly ( top , right , bot-
tom , and left ). In the second declaration, we're omitting the bottom and left , so they'll
inherit from the top and right values. In the same way, the following two examples would
also produce the same result:
border-width: 10px 10px 10px 10px;
Again, we're defining all four explicitly in the first declaration, but in the second declaration,
we're letting the missing values inherit from the only value that's defined: the top value for
the border width.
Using shorthand in this way is a good habit to pick up early because it'll help you to omit
unnecessary stuff in your code, making it easier to read.
The first layout technique that we're going to discuss is the only current example that works
in every browser and doesn't use HTML tables ( tables are not good for layout ). There are a
number of new techniques that we'll touch on later in the chapter that are supported in some
modern browsers, but float-based layouts are still necessary for websites that need to look
good in older browsers like Internet Explorer versions 7, 8, and 9. Even modern browsers
have sketchy support for newer layout methods so, at the time of writing, float-based layouts
are the primary layout method used in CSS.
In our RecipeFinder website, we have an ideal place to use a float-based layout: the main
content area. This area is divided into two vertical columns, as shown in Figure 2.3 :