CodeDragon circular icon

CodeDragon might not work properly for you...

CodeDragon is designed to work with Google Chrome and Firefox, and a few features of CodeDragon have been found not to work properly with other web browsers. To make sure you get the best experience when using CodeDragon, please download the latest version of Google Chrome or Firefox and try again. You can install Google Chrome for free here, and Firefox here.

Or, you can continue anyway.

CSS: The box model & margins

CSS/2

The box what? The box model is how elements are positioned and laid out, with padding and margins. It's a pretty important concept in CSS.

Written by Pal Kerecsenyi

CSS: The box model & margins

Ad Ethical + impactful advertising with tiny prices  Advertise on CodeDragon 
Ad Ethical + impactful advertising with tiny prices  Advertise on CodeDragon 

Boxes

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

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.

Remember that block and inline elements are interchangeable. You'll be able to use a CSS property (which you'll be shown in a future tutorial) to switch an element between block and inline mode.

However, elements always have either a block or inline mode as default - usually inline for text elements, and block for all other elements.

Block vs. Inline

The difference between block elements and inline elements is simple:

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:

Padding (30px)
Border (50px)
^ Element edge
Margin (100px top/bottom, 0px right/left)
The element itself (height: 200px)

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

The element itself (height: 200px)

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.

Note for pedantic readers:  'cm' can also be used as a unit of measurement in CSS, along with 'mm' and 'in' (millimetres and inches). These measurements don't actually represent real centimetres and inches, but an almost-always-inaccurate estimate. We'll use 'px' for this tutorial, as it's the most commonly used unit.

Here are a few examples of elements with different margins:

No margin
5px margin
20px margin
20px margin
50px margin

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.

End of tutorial