HTML Flow and the CSS Box Model – the ‘Display’ Property

You’ve seen the following 5 CSS properties:

1. color
2. background-color
3. padding
4. border
5. margin

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:

Contents

1. HTML Flow
2. Box Display Modes
   1. Block
   2. Inline
   3. Inline-Block
   4. None
3. Conclusion
4. Playing Around
5. References

HTML Flow

You may have noticed two things about the way HTML elements flow:

1. 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.
2. 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:

1. elements occupy the full width of the container they are in;
2. elements are rendered, from top to bottom, in the order they appear in the document;
3. 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.¹

Box Display Modes

Every HTML element is displayed as a box.
Some boxes stack:

This is the first of several sample paragraphs.

Quereris incidisse te in hominem ingratum: si hoc nunc primum, age aut fortunae aut diligentiae tuae gratias. Sed nihil facere hoc loco diligentia potest nisi te malignum; nam si hoc periculum vitare volueris, non dabis beneficia; ita ne apud alium pereant, apud te peribunt. Non respondeant potius quam non dentur: et post malam segetem serendum est. Saepe quidquid perierat adsidua infelicis soli sterilitate unius anni restituit ubertas.

Est tanti, ut gratum invenias, experiri et ingratos. Nemo habet tam certam in beneficiis manum ut non saepe fallatur: aberrent, ut aliquando haereant. Post naufragium maria temptantur; feneratorem non fugat a foro coctor. Cito inerti otio vita torpebit, si relinquendum est quidquid offendit. Te vero benigniorem haec ipsa res faciat; nam cuius rei eventus incertus est, id ut aliquando procedat saepe temptandum est.

This is the last sample paragraph.

Some boxes can be embedded inside other boxes:

1. This is the first of several list items.
2. Sed de isto satis multa in iis libris locuti sumus qui de beneficiis inscribuntur: illud magis quaerendum videtur, quod non satis, ut existimo, explicatum est, an is qui profuit nobis, si postea nocuit, paria fecerit et nos debito solverit.
3. This is the penultimate list item.
4. Adice, si vis, et illud: multo plus postea nocuit quam ante profuerat. Si rectam illam rigidi iudicis sententiam quaeris, alterum ab altero absolvet et dicet, ‘quamvis iniuriae praeponderent, tamen beneficiis donetur quod ex iniuria superest’.

But for some HTML elements, the boxes behave a little differently:

Elements like <strong>, can overlap the containing box.

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:

Why doesn’t <strong> nest like this?

There are 4 different ways the box of an HTML element can be rendered. It is controlled using the CSS display property.

Block

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.

strong {
  display: block;
  border: 5px solid black;
}

The code snippet above sets all strong tags to display in block mode. This means all strong elements will:

1. stack;
2. occupy the full width of the container they are in.

Combining it with p tags having the following style:

p {
  border: 5px solid red;
}

We would get the following:

Why is strong behaving strangely?

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.

Inline

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:

1. they only occupy the space of their content – not the full width of any container they are in;
2. their height is equal to the height of their content;²
3. 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:

li {
  display: inline;
  padding:20px;
}

ul {
  border: 1px solid black;
}

And the following HTML code:

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Privacy</a></li>
</ul>

Will render the list horizontally, giving it the appearance of a navigation bar:³

• Home
• About
• Blog
• Privacy

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.

Inline-Block

This display mode combines the features of block and inline display:

1. like inline elements, it does not break the flow of the content;
2. unlike inline elements, the contents receive a full box that fully nests inside whatever container they are in;
3. they apply the margin property to their top and bottom.

Using this property, we can make inline elements nest more “intuitively”:

strong {
  border:5px solid black;
  margin:2px;
}

Which give us the following result:

Now <strong> nest like a block.

This display property is more commonly used. It is one way to create columns of content. For example:

p {
  display:inline-block;
  margin:2px;
  border:5px solid red;
  padding:5px;
  width:150px;
}

When applied to the following:⁴

<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>

This is a multicolumn example using inline block. It also introduces the ‘width’ property, which sets the width of the content.

This is a multicolumn example using inline block. It also introduces the ‘width’ property, which sets the width of the content.

This is a multicolumn example using inline block. It also introduces the ‘width’ property, which sets the width of the content.

Again, this application is too broad, since it affects all p elements and not just those we might want arranged in columns.⁵. In a future tutorial, we will see how to limit the scope of styles we apply.

None

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.
For static documents, it doesn’t make much sense to style the display to none. However, with dynamic pages (pages using JavaScript – covered in a much later tutorial), this can be used to toggle parts of the content on and off.

Conclusion

1. HTML elements flow from the top to the bottom of the page in the order they appear in the HTML document.
2. The default behaviour for HTML elements is either block or inline.
3. Block elements break the flow of the content and stack and occupy the full width of the container they are in.
4. 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.
5. 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.
6. Elements with display set to none are completely removed from the normal flow of the document. They act as if they don’t exist.
7. 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.

Playing Around

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.

References

1. Display Properties