The box model for beginners web design tutorial


This is a basic webpage. It’s plain, and we can obviously see it’s
made of up a heading, some filler paragraphs, a few images, and some illegibly small buttons. The box model is the simple idea that each
of these HTML elements is treated as a box — you can imagine a 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 slide, where content is simply positioned wherever — everything having
a fixed width and height. But more like a Word document — where content
flows naturally from the top-left of the page. That’s the default on the web, too. Now, 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 okay on a wide screen like this. But what if we try to scale it down to a phone? Not great. Using CSS, we can style our elements — each
treated as a box — to respond to all kinds of devices — their positions and sizing
and spacing can respect each other — and that’s great. The other great thing about the box model
is that we can organize boxes inside of other boxes. This heading is a box. This paragraph a box. That’s 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 develop for the web. And 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 we can use these
concepts to control the styling and the layout for each and every element.

14 Comments

Add a Comment

Your email address will not be published. Required fields are marked *