Block Level Elements vs Inline Level Elements in HTML & CSS

Understanding how to navigate through HTML and CSS properties is the best way to shake up your website design skills. Whether you are a new developer or an experienced one brushing up on your skills, it is important to stay in line with some of the fundamental rules and structures of web development. Building even the most basic website can get very tricky without a good grasp of HTML and CSS.

This is why it is important to understand the display property values. All display elements in the browser have a default behavior. In this article, we will discuss the different ways elements will display in your browser. We will focus on the difference between block-level and inline-level elements. Let's dive in.  

HTML & CSS Block-Level and Inline-Level Elements    

The display property defines how your HTML element takes place in the view. It is important to know to manage the layout of your webpage.

Every element in HTML is treated as a box. The display property determines how these boxes will be shown on your screen. There are many display property elements. The most notable ones are block, inline, inline-block, table, flex, grid, and none.

Let's discuss the block element display property.

What are block-level elements?

A block-level element is an HTML element that takes up horizontal space by default. It stretches 100% wide and takes on the height of its inner content. By default, the block-level element always starts a new line and stacks vertically. With the help of CSS, its width and height can be adjusted. Take a look at the example below.

HTML:

CSS:

In this example, the sentence is inside of a <div> tag. By default, the <div> tag is considered a block-level element. The block element takes the full width of the parent element no matter the width of the content inside. The element's height is modified to the height of the inner content.  

Display: block, is the default value for the following elements:

• <div>
• <h1>-<h6>
• <p>
• <ul>
• <ol>
• <li>
• <table>
• <footer>
• <form>
• <header>
• <hr>
• <section>
• <video>

It is important to note that with block elements, CSS margin-right has no effect. However, you can still customize the size of block elements with CSS width, height, margin-top, margin-bottom, and margin-left.

What are inline-level elements?

An inline-level element takes on the width and height of its inner content. It lets you put multiple elements in the same line. Unlike block-level element, inline elements cannot have the width, top, or bottom margins set on them.

HTML:

CSS:

In the example above, the content is inside of a <span> tag. By default, the <span> tag is considered an inline-level element. The inline element always fits the size of the content inside of it.

Display: inline, is the default value to the following elements:  

• <img>
• <a>
• <span>
• <input>
• <br>
• <button>
• <em>
• <i>
• <b>
• <map>
• <output>

Note that you cannot change the size of the inline element except by changing the size of the content inside of it.

Block-Level Element vs Inline-Level Element  

There are a few differences between a block-level element and an inline-level element. For your convenience, we have put together a graphic to understand the difference.

Changing the Display Property

In CSS, you can change an element's default display type by using one of the following CSS properties:

 display: inline;
display: block;

In general, you wouldn't need to change the display property, but if you must, here are a couple of reasons why changing it can be useful:

• Horizontal list menu: Lists are block-level elements, but if you want to create a horizontal menu such as a navigation bar, you will need to convert the list to an inline element so that each item doesn't start on a new line.
• Headers in the text: If you want a header to remain on the same line as the text, you can change the default block element into an inline element.

Websites Using Block & Inline Elements

Designing a website doesn't have to be difficult, especially when you get the basics of HTML and CSS down pat. The block and inline display properties we covered are a few of the most important HTML and CSS properties to help your development skills. Spend some time sharpening your HTML and CSS and you will create attractive websites before you know it.