Seeing that HTML elements are rendered as boxes, let’s take a closer look at it.
You’ve seen the following 5 CSS properties:
It should be obvious that you can use these to give your documents some colour and life. We are still a little ways off from “professional” looking pages, but we’ll get there.
Using border and margin, the box nature of HTML elements is quite obvious, as the previous example shows:
You may have noticed two things about the way HTML elements flow:
- they flow from top to bottom. In other words, they stack one atop the other – never side by side. Even when enclosed inside another HTML element, they still stack from top to bottom.
- they occupy the full width of the container they are in.
There are exceptions, the strong, em, i, mark, and a elements only occupy the space of the content they enclose and do not stack.
This is known as normal flow:
- elements occupy the full width of the container they are in;
- elements are rendered, from top to bottom, in the order they appear in the document;
- exceptions to the first two rules only occupy the space they need to contain their content.
This is customizable and in future tutorials we will see how to change the normal flow so HTML elements can appear side by side – like these two paragraphs:
For now, just assume that HTML elements obey the rules for normal flow and are displayed in the order they appear in your HTML document.1
Box Display Modes
Every HTML element is displayed as a box.
Some boxes stack:
Some boxes can be embedded inside other boxes:
But for some HTML elements, the boxes behave a little differently:
If boxes are supposed to stack or nest, why don’t HTML elements like strong, em, i, mark, and a stack or nest “properly” inside other HTML elements?
In other words:
There are 4 different ways the box of an HTML element can be rendered. It is controlled using the CSS display property.
HTML elements which stack and occupy the width of the container they are in have their display property set to block. In other words, block HTML elements break the flow of the content to set up a new box.
The code snippet above sets all strong tags to display in block mode. This means all strong elements will:
- occupy the full width of the container they are in.
Combining it with p tags having the following style:
We would get the following:
It is very unlikely you will be changing the display of non-block elements to block. If you find yourself doing this, you are probably structuring your content incorrectly.
HTML elements which do not stack and which expand only enough to contain their content have their display property set to inline. In other words, inline HTML elements do not break the flow of the content.
The HTML elements strong, em, i, mark, and a are inline elements:
- they only occupy the space of their content – not the full width of any container they are in;
- their height is equal to the height of their content;2
- they ignore the margin property for their top and bottom.
It is very unlikely you will be changing the display of non-inline elements to inline. If you find yourself doing this, you are probably structuring your content incorrectly.
Having said that, there is a common use for changing the display from block to inline: navigation bars (or menu bars).
Most navigation bars on websites are actually unordered lists that have had their display property changed from block to inline.
For example, applying the following style to li tags:
And the following HTML code:
Will render the list horizontally, giving it the appearance of a navigation bar:3
In a future tutorial, we will see how to set styles more specifically so we don’t affect the behaviour of all instances of an element in a document. The example above makes all lists in the document horizontal – which is, probably, not the behaviour you want.
This display mode combines the features of block and inline display:
- like inline elements, it does not break the flow of the content;
- unlike inline elements, the contents receive a full box that fully nests inside whatever container they are in;
- they apply they margin property to their top and bottom.
Using this property, we can make inline elements nest more “intuitively”:
Which give us the following result:
This display property is more commonly used. It is one way to create columns of content. For example:
When applied to the following:4
<p>This is multicolumn example using inline-block. It also introduces the 'width' property, which sets the width of the content.</p> <p>This is multicolumn example using inline-block. It also introduces the 'width' property, which sets the width of the content.</p> <p>This is multicolumn example using inline-block. It also introduces the 'width' property, which sets the width of the content.</p>
Again, this application is too broad, since it affects all p elements and not just those we might want arranged in columns.5. In a future tutorial, we will see how to limit the scope of styles we apply.
Setting the display property to none effectively removes the styled element (and any children it may contain) from the rendered display. In other words, it is not rendered at all and no space is reserved for it in the display. In technical terms, we say the space is collapsed.
- HTML elements flow from the top to the bottom of the page in the order they appear in the HTML document.
- The default behaviour for HTML elements is either block or inline.
- Block elements break the flow of the content and stack and occupy the full width of the container they are in.
- Inline elements maintain the flow of the content and occupy only the width of the content they contain. They do not respect the top and bottom margin settings.
- Inline-block elements combine features from both block and inline elements:
- they maintain the flow of the content and occupy only the width of their contents
- they completely nest inside their container and respect the top and bottom margin settings.
- Elements with display set to none are completely removed from the normal flow of the document. They act as if they don’t exist.
- You should think carefully before changing the display behaviour of elements. Changing their behaviour, usually, indicates an improperly structured document. However, there are exceptions:
- the inline mode is often applied to unordered lists to create a navigation bar (menu bar)
- the inline-block mode is one way that multicolumn documents can be created.
The best way to learn is to play around with what you have learned.
This tutorial has explained a little more about how HTML content flows and delved a little deeper in to how the element boxes behave.
Play around with these display properties a bit to get a feel for how block, inline, and inline-block differ in behaviour.
In general, you are not likely to be changing them, but it is important to know how they work.
In the next tutorial, we’ll see how to apply styles more selectively to only certain elements.
- It is a good assumption because that is their default behaviour, you have to explicitly change that behaviour with CSS styling.↩
- We haven’t covered this yet, but unless you override it, the element will use the same line height and text size as the other content it is surrounded by. This will be covered in more detail in a future tutorial.↩
- As you can see, a navigation bar is simply a list of links.↩
- The CSS width property sets the width of the content. The padding, borders, and margin are extra on top of the width. This property will be discussed further in a future tutorial.↩
- There are many ways to do columns using CSS. This is just one way.↩