HTML Elements: Block-Level vs. Inline Elements

CSS stylesheet on a computer screen — Degui Adil / EyeEm / Getty Images

By

Updated on June 20, 2019

HTML is made up of various elements that act as the building blocks of web pages. Each of these elements falls into one of two categories: block-level elements or an inline element. Understanding the difference between these two types of elements is an important step in building web pages.

Block Level Elements

So what is a block-level element? A block-level element is an HTML element that begins a new line on a web page and extends the full width of the available horizontal space of its parent element. It creates large blocks of content like paragraphs or page divisions. In fact, most HTML elements are block-level elements.

Block-level elements are used within the HTML document's body. They can contain inline elements, as well as other block-level elements.

Inline Elements

In contrast to a block-level element, an inline element:

It can begin within a line.
It does not start a new line.
Its width only extends as far as it is defined by its tags.

An example of an inline element is the <strong>, which makes the font of the text content contained within boldface. An inline element generally only contains other inline elements, or it can contain nothing at all, such as the <br /> break tag.

Switching Inline and Block Element Types

You can change an element's type from inline to block, or vice versa, using one of these CSS properties:

```
display: block; 
```
```
display:inline; 
```
```
display:none;
```

The CSS display property lets you change an inline property to block, or a block to inline, or not to display at all.

When to Change the Display Property

In general, leave the display property alone, but there are some cases where swapping inline and block display properties can be useful.

Horizontal list menus: Lists are block-level elements, but if you want your menu to display horizontally, you need to convert the list to an inline element so that each menu item doesn't start on a new line.
Headers in the text: Sometimes you might want a header to remain in the text, but maintain the HTML header values. Changing the h1 through h6 values to inline will allow text that comes after its closing tag to continue to flow next to it on the same line, instead of starting on a new line.
Removing the element: If you want to remove an element completely from the document's normal flow, you can set the display to
```
none
```
One note, be careful when using display: none. While that style will, indeed, make an element invisible, you never want to use this to hide text that you added for SEO reasons, but do not want to display for visitors. That is a surefire way to have your site penalized for a black hat approach to SEO.

Common Inline Element Formatting Mistakes

One of the most common mistakes a newcomer to Web design makes is trying to set a width on an inline element. This does not work because inline elements widths are not defined by the container box.

Inline elements ignore several properties:

```
width
```
and
```
height
```
```
max-width
```
and
```
max-height
```
```
min-width
```
and
```
min-height
```

Microsoft Internet Explorer (replaced by Microsoft Edge) has in the past incorrectly applied some of these properties even to inline boxes. This is not standards compliant. This may not be the case with newer versions of Microsoft's Web browser.

If you need to define the width or height that an element should take up, you'll want to apply that to the block-level element containing your inline text.

Format

mla apa chicago

Your Citation

Kyrnin, Jennifer. "HTML Elements: Block-Level vs. Inline Elements." ThoughtCo, Sep. 30, 2021, thoughtco.com/block-level-vs-inline-elements-3468615. Kyrnin, Jennifer. (2021, September 30). HTML Elements: Block-Level vs. Inline Elements. Retrieved from https://www.thoughtco.com/block-level-vs-inline-elements-3468615 Kyrnin, Jennifer. "HTML Elements: Block-Level vs. Inline Elements." ThoughtCo. https://www.thoughtco.com/block-level-vs-inline-elements-3468615 (accessed April 25, 2024).