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.
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.
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.
However, elements always have either a block or inline mode as default - usually inline for text elements, and block for all other elements.
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(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(a paragraph element in this case).
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:
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:
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: