• The box model
• How margin, padding & borders work

‍

• This is a basic web document. It's simple, and it's made of up a heading, some text, a few images, and some illegibly small buttons.
• Each of these elements is treated as a box — you can imagine an invisible boundary on each of them. These boxes sit next to each other and stack on top of one another depending on the properties we give them.
• It's helpful to think of web content not like a PowerPoint document, where content is simply positioned wherever — completely non-responsive and stuck in a fixed slide...but more like a Word document — where content flows naturally from the top-left of the page.
• At first, this might seem kind of rigid. But it actually gives us tremendous flexibility as we create layouts for all kinds of screen sizes and devices.
• Think again about PowerPoint. Looks great on a wide screen like this. But what if we try to scale it down to a phone? Not so great.
• But a web document? Again, this content flows naturally.
• The other great thing about the box model is that we can organize boxes inside of other boxes. Headings? That's a box. Paragraphs? That's a box? Images? That's a broccoli box, a Bach box, a Brach's box, a Barack box, and of course, who could forget: the box box.
• And since we've put all these boxes in another box, that box can be used to organize and style the boxes inside!
• Here's a practical example of a layout we might encounter on the web. Since each of the elements inside are boxes — we can move and push content around using padding to affect the space inside of a box, and margin to affect the space outside of a box (in between that box and the boxes around it).
• The big takeaway here is that the web is responsive. We can add all sorts of content to our document and it naturally flows like content in a Word document. Each element on the web is its own box. They can stack. They can wrap. They sit next to each other. And we control the styling and the layout of each and every box on the page.

‍

‍