Block and Inline Elements

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. However, inline-block elements behave like inline elements, but with block-style padding and margin. display: inline-block is a useful tool to know about, but in practice, you will probably end up reaching for flexbox more often if you are trying to line up a bunch of boxes. Flexbox will be covered in-depth in the next lesson.

Research

Take a few minutes to search the web for lists of block and inline elements. What other elements did you find that are block or inline? Does it make sense that they are one or the other?

Normal Flow

The concept of “Normal flow” is implied in the box-model resources, but is not laid out very specifically. Read Normal Flow  from MDN to make sure you understand how elements lay themselves out by default.

Divs and Spans

You can’t talk about block and inline elements without discussing divs and spans.

All the other HTML elements you have encountered so far give meaning to their content. For example:

• Paragraph elements tell the browser to display the text it contains as a paragraph.
• Strong elements tell the browser which texts within are important,
• and so on.

Yet, divs and spans give no particular meaning to their content. They are just generic boxes that can contain anything.

Knowledge Check