Block and Inline Elements

In this lesson, we’ll continue exploring the CSS display property and how it affects the document flow. We’ll begin by seeing that we can omit adding our custom CSS classes if the style described in that class is the default style of an element.

We’ll also see how to override the default behavior of the <span> element. By default, the <span> element is an inline element, but we’ll change it to display as a block-level element, that is, we’ll make it behave just like a <div> or a <h1> behaves by default. Let’s start!

When is it reasonable to not add a CSS class?

You don’t have to add a CSS class if you want the default browser styles to be displayed. In other words, if you’re happy with how some elements are displayed on your page, then you don’t have to add custom CSS classes that override that default behavior.

The first example looks like this: