Understanding the CSS box model and its quirks is key to completing compelling web page layouts, while avoiding the “why is this over there?” problems most new web designers face.
span elements on a page to create a basic web page layout.
Prerequisite: CSS Introduction
Time: 2 hours
- The Box Model
- div elements
- A Simple div Example
- The Float Flag Quirk
- span elements
Before you can create effective web page layouts you need at least some comprehension how to measure elements in CSS, which will allow you to control the box model and how elements relate to each other in size and position on web pages.
While everyone should be familiar with centimeters and have at least a rough understanding of pixels, there are several new measurement systems that require introduction:
There are many more sizing properties and values in CSS than most developers appreciate. The following articles cover these lesser-known applications, with a particular focus on extrinsic and intrinsic values.
Read Shay Howe’s article on the box model and positioning from his Beginner’s Guide to HTML & CSS; read The CSS Layout Model together with Floats & Clearing from the Web Platform Docs.
Read Adam Schwartz’s “The Box” in The Magic of CSS as a summary, and follow it up my reading Layout.
When You’re Done
span elements and an understanding of the basic CSS box model, you’re almost ready to start making basic layouts on web pages.
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.