Chapter 3. Mastering the box model

This chapter covers

  • Practical advice for element sizing
  • Vertical centering
  • Columns of equal height
  • Negative margins and margin collapsing
  • Consistent spacing of components on the page

When it comes to laying out elements on the page, you’ll find a lot of things going on. On a complex site, you may have floats, absolutely positioned elements, and other elements of various sizes. You may also have some layouts using newer CSS constructs, such as a flexbox or a grid layout. You have a lot of things to keep track of, and learning everything involved with layout can be overwhelming.

We’ll spend several chapters taking a close look at several layout techniques. Before we get to those, it’s important to have a solid ...

Get CSS in Depth now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.