Coding for designers part 6

Remember that just like in InDesign, every element on a web page is contained within a rectangular box.

To take this a step further, each element has a ‘display property’ that determines how its containing box will sit in relation to the other elements on the page.

There are a few different display properties but the two most important ones are called inline and block.

Inline elements

An element with the display property of inline and can sit inline with outer elements. i.e. it won’t force a line break or break the flow of the text

Some examples of elements that are inline by default are img, a, em, strong and span.

Block elements

Elements with the display property of block are normally those that wrap around other elements and also ‘blocks’ of text such as paragraphs and headers.

By default they don’t sit inline, instead they break onto their own line and take up as much horizontal space as there is available.

Some examples of elements that are block by default are div, p, h1, ul and li.

Say what?

I’ve cheated a little bit here and added a red border around every element in this simple example just to show how they sit together.

See the Pen Inline vs Block elements border by chris-creditdesign (@chris-creditdesign) on CodePen.

Notice that the block elements - the blocks of text, the headline, paragraphs and the list - are all on their own lines and spread out to the right hand side of the screen.

The inline elements - in this case the link to nature.com, the cat pic and the bold and italic text - only take up as much space as they need and don’t push down to a new line.

Note: In reality you’ll rarely see large images like this placed inline but it’s interesting to know that the default display type for images is inline. Well I think it’s interesting anyway.

You can override the default display type by setting the display property with CSS:

img {
	display: block;
}

li {
	display: inline;
}

Just for fun, and sometimes for real, you can make an element disappear by setting its display type to none.

.catpic {
	display: none;
}

The box model

The next thing to be aware of is the ‘box model’. The box model is used to calculate how much space an element will take up on screen. It’s a funny sounding term but the concepts are exactly the same as those that you are used to in InDesign.

Here’s a diagram that shows how the box model is put together:

Margin pushes the element away from its neighbouring elements. It works in a similar way to text wrap in InDesign but it effects all types of elements, non just text.

Borders outline the box that contains your content. You can set a width, colour and a style for the border. Border styles include dotted, dashed or solid.

Padding pushes the border away from your content. It behaves in exactly the same way as inset spacing in InDesign.

Content represents the actual size of the element, be it some text or an image or whatever else.

It is possible to set a different amount of padding, border-width and margin for each side individually. You can also set an individual width, colour and style for each of the border’s edges.

So what?

The box model is useful because we can use it to calculate the space that will be taken up within a layout by each element. We do this by adding their margin, border and padding to the width or height values.

For instance the space needed for a 300px wide div with 10px margin, 10px border and 10px padding can be worked out like this:

margin left (10px) + border left (10x) + padding left (10px) + width (300px) + padding right (10px) + border right (10px) + margin right (10px) = 360px

This means that if we want this element to fit into a 300px wide column, such as a sidebar for instance, we’d need to set its actual width to be 240px to account for the space needed for the margin, border and padding.

Working that out every time can be a bit of a headache. But thankfully there is a CSS property that makes this a bit easier. By setting the property box-sizing to border-box the border and padding will move inside the declared width of our element rather than being added it it.

Be warned, you’ll need to add -moz- and -webkit- vendor prefixes for older versions of Safari and Firefox and this won’t work at all for versions of Internet Explorer before version 8. The complete CSS would look something like this:

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

And the updated equation would then read:

margin left (10px) - border left (10x) - padding left (10px) + width (300px) - padding right (10px) - border right (10px) + margin right (10px) = 320px

Notice that the margin value is still added to the total width.

In the example below I’ve set up three divs. The first has no border or padding set. The second has 10px border and 10px padding and the third has the same border and padding but with box-sizing: border-box turned on. Check out how the middle box is way fatter and breaks out of the column.

See the Pen zhHIf by chris-creditdesign (@chris-creditdesign) on CodePen.

Great! Now that we understand display properties and the box model, next time around we can look at how to actually position elements on the page to create a layout.