Dear Developers, The Box Model is a Blessing

Posted 5 months ago by Naomi Francis

My head has been wrapping itself around boxes. Organising them, resizing them and generally just being made aware that they exist. If you haven’t already guessed it, this next post in my Dear Developer series of learning HTML and CSS is of course about the Box Model. Not, in fact, figurative boxes.

After a long holiday in the Caribbean and some time away from coding, it was refreshing to come back to an aspect of HTML and CSS that was quite eye opening. Since I’ve been back I’ve been introducing myself to the CSS Box Model, and honestly for such a simple aspect of the language, it’s totally simplified the way I look at websites now. Illuminating the impact different devices an have on the harmony of your elements and how to prepare for it in your code.

For this lesson I dabbled between the education tools Udacity and Codecademy, read a few articles here and there and spoke to some of my colleagues. If you’re on this journey with me – I hope this clears up the basics of what you might need to know.

Just in case you want to jump between topics, here’s the breakdown:

The Box Model

For me, this model is less so a bundle of new code to learn but more a concept which develops your understanding of how elements are placed and make up a web page. So whilst you’ll notice some new lines of code, in this article you’ll find there aren’t as many HTML elements or CSS values which seem alien to you.

As a beginner building your first website, you kind of just imagine that the elements you add simply fill the space that you can see that it fills. But when is anything that simple?

Each element is actually sitting inside a box. If you think back to what happens when changing the background colour of heading, for example, it helps to make this more clear. You probably thought, why is a huge rectangular square shaped being surrounding my text? That’s the Box Model coming into play.

“All HTML elements can be considered as boxes. In CSS, the term “box model” is used when talking about design and layout. The CSS box model is essentially a box that wraps around every HTML element.” – W3Schools

To give things a test drive, the CSS value below will make all the boxes appear on your web page and you’ll see that no matter the shape, size or form – everything is sitting within a box.

With this knowledge, you start to see a website in all it’s simplicity with all the elements, in boxes, piled on top of each other. Which is much less intimidating, right?

The CSS Box Model, consists of five core parts which we’ll cover:

Border

The concept of borders is nothing new, right? Finally a term we’re familiar with inside and outside the tech world. To outline the boxes which surround your elements you can adjust line thickness, it’s pattern and colour.

To adjust the pattern style of the border here are the key styles you can attribute to the border-style property:

When adjusting the border thickness you’ll find it’s most commonly done by using pixel measurement, this is because of the flexibility one can have over its design. However, in case you’d like to keep it simple – you can also adjust the sizing with named thicknesses: thin, medium, thick.

It’s also super simple to adjust border thickness for each singular side of the element’s box by applying pixel measurements for each side in clockwise order. Starting with top, right, bottom, left.

Like so:

Padding & Margins

To explain padding and margin, I’m going to quote the awesome article written by Kevin Kononenko, Founder of Manual, which describes the Box Model wonderfully as being no different to your classic surburban neighborhood.

1-t9pfj7v8hfovbor2qw0jyg

Kononenko describes padding to be similar to ‘the territory around the element that is limited by the border. This is kind of like the yard and fence on your property. This is the padding and border.’

As for the margin? It’s ‘the empty space that separates this element from the surrounding elements. This is similar to the trees that are still technically part of your property, but give you some privacy from the neighbors and are just meant to give you a buffer.’

The properties for adjusting each of these can be done simply by adjusting the pixel size using the padding and margin properties.

Resizing boxes for the better

One thing to remember whenever you’re dealing with sizing, is the number of devices which are available to us now. Good design always comes down to thinking about the user and their needs. Adam Silver provides a sweet run through of this in his article ‘Stop Using Device Breakpoints’, if you want to do some further reading.

“Good design always comes down to thinking about the user and their needs.”

width and height are the two key dimensions in every element’s box. Each one is automatically given its default size but it’s very simple to make changes to these. With their CSS properties you can adjust easily using measurements you might be familiar with when we discussed font sizing.

px – pixels, your basic unit of programmable colour
ems – Set the dimensions of the box relative to the size of the text within it
% – Set dimensions in relation to the size of the actual element in the box

Generally, you’ll find that developers commonly use ems or percentages when setting box dimensions as these two units allow boxes to be scaled depending on the size of the user’s display.

To avoid the problem of content undergoing a heavy, unwanted makeover when it comes to different screen sizes/devices, two properties can be manipulated to keep the elements looking something like themselves. By adding min-width and max-width, min-height and max-height properties to your CSS values, you can keep your design consistent.

These properties are particularly important when you’re dealing with text; any text element that is expanded or reduced will severely affect the legibility. If the max-height is set too low, you’ll find it might result in text spilling out of the box. This is called an overflow, which leaves your website looking super messy – but here’s the fix for it.

You can tell the unruly text what to do with the overflow property, and give it one of these two values:

Comparing education tools

I’ve been using Codecademy since the beginning here and I really do recommend it, for all learning types. As I’ve said before, the format really gets you thinking and doing at the same time. When we’re trying to pick up a new skill we don’t just want to be playing sponge and simply absorbing.

CodecademyLearn to code interactively, for free.

This time I tried out Udacity as well on the same topic of Box Models and was really surprised at the difference in style and how I responded to it. Udacity’s lessons in HTML and CSS are video based and each feature a tutor who runs over each segment of a topic in short two to three minute sets.

Udacity – Intro to HTML and CSSLearn how to convert digital design mockups into static web pages and how to build a responsive portfolio site to showcase your work.

For this reason, Udacity presents a short and speedy way to get your head around the concept of the Box Model. So if you quickly just want an overview, or a reminder, of a topic, this might be the spot for you. Despite it holding tasks and quizzes for viewers, it does make it very easy to get around not doing these. Which means for those of you who are prone to procrastination and quick fixes – you might be hearing a lot about code, but not really doing much of it.

Also, be warned these videos might also be for the younger age group and hold a considerable amount of the cheese factor.

For my next trick

I’ll be showing you the website I’m building in my next post and give you a run through of where I’m at. At the same time, I’ll give you some notes on what went well, what didn’t and also tie in an overview of how to keep code organised using IDs and Classes.

Design and prototyping for everyone

Design and prototyping for everyone

Thousands of individuals and teams use Marvel to design and prototype ideas.

Get Started, it's Free!

Writing for Marvel. Writing for fun. Eating everywhere, all the time.

Related Posts

Nowadays, more and more product teams are adopting Agile processes to manage projects and create more user-centric products. As a result, we’ve seen a bunch of new jargon pop up alongside the various design methodologies that emerged to help teams bring design to Agile development. “From Design Sprints to Agile UX, this is my attempt at breaking down industry jargon… Read More →

Between 2012 and 2017, we’ve seen the biggest tech companies in the world hire thousands of designers to push the value of design through their organisations. For example, IBM has gone from just 1 designer to every 72 engineers, to a ratio of 1 in 8. Intercom lead the way in terms of numbers, with 1 designer to every 5… Read More →

As individuals, and as designers, we are all looking for those special qualities in our jobs. It can sometimes be overwhelming stepping into the job market. We question: Will the role be challenging enough? What can I expect to work on? How do my own values match to that of the business? After a while the answers just become guess… Read More →