Boxes

In CSS, there's a difference between how text elements work and how other elements work. These layouts have names:

• Inline elements are the text elements you've used so far. This includes spans, text modifiers (e.g. 'strong' and 'em') and hyperlinks. However, by 'text element' we mean things you put inside paragraphs and headings. Slightly confusingly, this does not include paragraphs and headings themselves, which are actually block elements.

• Block elements are all the other elements. For example, tables are block elements. These elements contain more than text - they are a solid 'block'.

Inline elements are fairly straight-forward, and for the most part we don't have to deal with the box model for them (although some parts of the box model apply for text too). In this tutorial, we'll focus on block elements.

Don't understand any of this? Don't worry. Just keep reading and all will make sense - it's not as complicated as it sounds! If you're confused about anything, you can also ask us.

Block vs. Inline

The difference between block elements and inline elements is simple:

• Inline elements start on the same line, and take up only as much width as they need to.

  This is some text, and this is an inline element (a span element in this case).

• Block elements always start on a new line, and take up 100% of the available width.

  This is some text, and 

  this is a block element

   (a paragraph element in this case).

The box model

So what is the title of this tutorial about? Well, all block elements have something called a box model. This is quite a simple concept actually, and you may have seen something like it already.

The box model simply describes every block element as having a few structural properties: margin, padding, width/height and a border. Here's a demonstration:

Without all the fancy annotation, this is what that element looks like:

Margin

Let's start by focusing on margin, which is relatively simple. Margin is the amount of space around the outside of the element, usually used to separate it from other elements.

In publishing, a margin is the blank space put around the edge of a page, which is very similar to what it is in CSS.

It's different to padding - that's the amount of space inside the element, between the edge and the actual contents.

As you may have noticed, we use something called 'px' to say how big we want things to be. This is the most important unit of distance measurement used in CSS, and it's short for pixels. The more px/pixels you have, the bigger something will be. Think of it as cm/centimetres, but for computers.

Here are a few examples of elements with different margins:

Margins in CSS

So how do we do this margin thing in CSS? There's a property called margin. What a surprise.

Here's how we apply a margin:

This applies a margin to all sides of the element. However, we can also choose to apply a margin to specific sides instead. In fact, CodeDragon forces you to specify the sides you want to apply a margin to, and doesn't let you use the all-sides property shown above.

Here's how we do it:

Your turn

1. Drag the big blue basic structure block into the workspace. Change the title to anything you want.
2. Drag the yellow header block into the body, and type anything you want into it.
3. Drag the style attribute block onto the side of the header block.
4. Drag the margin block inside the pink style block.
5. Right-click on the header block, and click 'Duplicate'. Place the new block below the previous one, and repeat this a few times, to get around 4 headers below each other.
6. Play around with the margin properties - you can put multiple inside each style block, and use the dropdown to select the side it should apply to. See how the headers' positions change as you change the margins.