HTML and CSS Reference
In-Depth Information
Problem Solving: The Virtue of Being Negative
It's common to think of layout in terms of placing content, but good layout also must be
concerned with placing emptiness. In art and page design, this is known as working with
positive and negative space. Positive space is the part of the page occupied by text, graph-
ics, borders, icons, and other page elements. Negative space, or white space, is the unoc-
cupied area, and provides balance and contrast to elements contained in positive space.
A page that is packed with content leaves the eye with no place to rest; this also can
mean that the eye has no place to focus and maybe even no clear indication about where
to start reading. Instead, it's important to use negative space to direct users to resting
stops before moving on to the next piece of page content. This can be done by providing a
generous margin between page elements and by increasing the padding within an ele-
ment. Even increasing the spacing between letters within an article heading can alleviate
eye strain and make the text easier to read.
White space also has an emotional aspect. In the early days of print advertising, white
space was seen as wasted space, and thus smaller magazines and direct mail advertise-
ments would tend to crowd content together in order to reduce waste. By contrast, upscale
magazines and papers could distinguish themselves from those publications with an excess
of empty space. This difference carries over to the Web, where a page with less content and
more white space often feels more classy and polished, while a page crammed with a lot of
content feels more commercial. Both can be effective; you should decide which approach to
use based on your customer profile.
The increase in screen sizes has reduced the need for designers to cram content into
small spaces. The result has been a greater emphasis on designs that provide gener-
ous amounts of white space, which has improved the readability and visual appeal of
Web pages.
Next, Dan wants to add a graphic image of himself in the background of the presi-
dent's message box. He wants the image to be placed in the bottom-right corner of the
box and sized to 40% of the width of the box. To make room for this image, you'll set
the font size of the paragraph text to 87.5% of the default font size, and the right mar-
gins of the paragraphs to 40%. Note that in this context, a value of 40% refers not to the
width of the page, but only to the width of the president's message box that contains the
To add the background image:
1. At the bottom of the cp_styles.css file, insert the following style rule to set the
paragraph font size and margins (see Figure 4-32):
#president p {
font-size: 87.5%;
margin: 0px 40% 20px 15px;
Search WWH ::

Custom Search