Web Design Playground, Second Edition

9 Styling Sizes, Borders, and Margins

This chapter covers

• Understanding the CSS box model
• Setting the width and height of an element
• Adding padding around an element’s content
• Applying a border to an element
• Surrounding an element with a margin

When you learn about design, one of the first concepts that comes up is the principle of proximity: related items should appear near one another, and unrelated items should be separated. This practice gives the design clear visual organization, which makes it easier for the reader to understand and navigate the design. The principle of proximity applies to your web page designs as well, but there’s a problem. If you stick with the browser’s default styling, your web page elements have no proximity structure; ...