CSS in Depth

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 ...