Block and Inline

Introduction

The MDN box model article linked in the previous lesson mentions that different display types have subtly different box models, and that you can change how a box is calculated by changing the display property. We will explore the different display values you can use further in this lesson.

Learning Outcomes

  • You’ll learn about “Normal flow.”
  • You’ll learn the difference between block and inline elements.
  • You’ll learn which elements default to block and which elements default to inline.
  • You’ll learn what divs and spans are

Block vs Inline

Most of the elements that you have learned about so far are block elements. In other words, their default style is display: block. By default, block elements will appear on the page stacked atop each other, each new element starting on a new line.

Inline elements, however, do not start on a new line. They appear in line with whatever elements they are placed beside. A clear example of an inline element is a link, or <a> tag. If you stick one of these in the middle of a paragraph of text, it will behave like a part of the paragraph. (Like this…) The link’s text will sit alongside other words in that paragraph. Additionally, padding and margin behave differently on inline elements. In general, you do not want to try to put extra padding or margin on inline elements.

Inline-block elements behave like inline elements, but with block-style padding and margin. Inline-block is a useful tool to know about, but in practice you’ll probably end up reaching for flexbox more often if you’re trying to line up a bunch of boxes. Flexbox will be covered in depth in the next lesson.

Divs and Spans

We can’t talk about block and inline elements without discussing divs and spans. All the other HTML elements we have encountered so far give meaning to their content. For example, paragraph elements tell the browser the text it contains is to be displayed as a paragraph, and strong elements tell the browser the text within is important etc. Divs and spans, on the other hand, give no particular meaning to their content. They are just generic boxes that can contain anything.

Having elements like this available to us is a lot more useful than it may first appear. We will often need elements that serve no other purpose than to be “hook” elements we can give an id or class so we can target them for styling with CSS. Another use case we will face regularly is grouping related elements under one parent element to position them on the page correctly. Divs and spans provide us with the ability to do this.

Div is a block-level element by default. It is commonly used as a container element to group other elements. Divs allows us to divide the page into different blocks and apply styling to those blocks.

See the Pen block-inline-lesson-div-example by TheOdinProject (@TheOdinProjectExamples) on CodePen.

Span is an inline-level element by default. It is commonly used to group text content and inline HTML elements so we can apply styling to them.

See the Pen Untitled by TheOdinProject (@TheOdinProjectExamples) on CodePen.

Assignment

  1. The concept of “Normal flow” is implied in the box-model resources, but isn’t laid out very specifically. Read “Normal Flow” from MDN to make sure you understand how elements lay themselves out by default.
  2. W3 schools’ “HTML Block and Inline Elements” has a description and a list of all the default block and inline elements.
  3. The Digital Ocean tutorial “Inline vs Inline-block Display in CSS” has a couple of great examples that clarify the difference between inline and inline-block.

Practice

  1. Go to our CSS exercises repository and do “margin-and-padding-1” and “margin-and-padding-2”.

Additional Resources

This section contains helpful links to other content. It isn’t required, so consider it supplemental.

  • This tutorial is a little dated at this point, but its examples are clear. The first 6 slides cover the material we’ve seen so far.

Knowledge Check

This section contains questions for you to check your understanding of this lesson. If you’re having trouble answering the questions below on your own, review the material above to find the answer.

Improve this lesson on GitHub

Have a question?

Chat with our friendly Odin community in our Discord chatrooms!

Open Discord