Chapter 1
Figuring Out the CSS Box Model
IN THIS CHAPTER
Wrapping your head around the CSS box model
Giving elements room to breathe with padding
Enclosing elements with borders
Keeping other elements at bay with margins
Setting the width and height of page elements
Every element in web design is a rectangular box. This was my ah-ha moment that helped me really start to understand CSS-based web design and accomplish the layouts I wanted to accomplish.
— CHRIS COYIER
I’m not going to lie to you: When you’re just getting started with CSS, the elements on the page will sometimes seem to defy your every command. Like surly teenagers, they ignore your best advice and refuse to understand that you are — or you are supposed to be — the boss of them. Okay, I did lie to you a little: That can happen to even the most experienced web coders. Why the attitude? Because although web browsers are fine pieces of software for getting around the web, by default they’re not very adept at laying out ...
Get HTML, CSS, & JavaScript All-in-One For Dummies 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.
