CSS Cookbook, 3rd Edition

Chapter 5. Page Elements

Introduction

From the most obvious design choices, such as selecting the appropriate typography and imagery, to those that are often overlooked, such as adjusting leading and color schemes, every decision affects how a message in a website is conveyed to visitors.

This chapter covers page elements that help to frame a web page like a frame for a painting. Page elements are items that affect the appearance of a web page, but aren’t necessarily thought of as comprising a web page’s design. For example, the appearance of the scroll bar is a page element.

By manipulating elements such as the margins and borders surrounding the contents of a web page, developers effectively frame the content of the page without actually styling the content.

Such simple changes can affect the page’s overall design in a profound way, or they can add a subtle detail that completes the design.

Eliminating Page Margins

Problem

You want to get rid of the whitespace around the edges of a web page and between the browser chrome and the contents of the page, as shown in Figure 5-1.

Figure 5-1. Page margins visible as the whitespace around the edges of a web page

Solution

Set the value of the margin and padding properties for the html and body elements to 0:

html, body {
 margin: 0;
 padding: 0;
}

Discussion

Setting the margin and padding properties of the body element to 0 helps create a full-bleed effect—in ...