Block-Level Elements Versus Inline-Level Elements

Introduction

This post discusses the HTML block and inline elements and how CSS behaves with these elements when styled.

If you are currently learning HTML and CSS and looking for this concept, you’re in the right place.

Table of Contents

• Background
• What is a Block Level Element?
  • Block-level elements in HTML
  • Example
• What is an Inline Level Element?
  • Inline-level elements in HTML
  • Example
• What is an Inline Block Level Element?
  • Change the display property of the <h1> element in our First example into inline
  • Change the display property of the <span> element in our Second example into an inline-block
• Understanding the <div> and <span> Tags
  • Here are things we need to remember about <div> and <span>
• Summary

Background

In CSS, we have display the property, which sets the behavior of a given HTML element, will be rendered on the page.

There are plenty of values for this property, but we only need to focus on inline, block, and inline-block.

OK, let’s get started and explore how these values behave when being rendered on a page.

What is a Block Level Element?

• A block-level element continuously expands the full width available. In simple terms, it is always in full width by default.
• It forces elements that come after them to appear on the next line (they stack on top of each other).
• CSS properties, such as height and width, can be set.

Block-level Elements in HTML

Let us see some of the block elements we have in HTML.

For the complete list of HTML block-level elements, please click here.

Example

OK, let’s have our first example below.

1. Let us create a couple of <h1> elements:
   HTML

   <h1>Code Project Rocks</h1>
   <h1>Code Project Rocks</h1>
   <h1>Code Project Rocks</h1>

2. As expected, they will be on top of each other:

   I know they look like the '90s; to solve that, let's put some style.

   CSS

   h1{
     font-weight: bold;         /*sets the h1 text to bold*/
     color: #FF4136;            /*sets the text color of h1*/
     background-color: #9dffa1; /*sets the background-color of h1*/
     outline: 1px solid green;  /*line that is drawn around elements*/
     height: 100px; 
     width: 300px; 
     padding: 50px 0 0 20px;
   }

As you can see, we have set some basic styles for the <h1> element.

Here are the things to point out about the styles:

• The outline property is used to help us see the <h1> elements as a box (the outline is used not to affect the box model).
• The width is set to 300px. However, if you remove it or set it to 100%, you'll eventually see that the <h1> occupies the browser's entire available width.
• The padding is set like that to make the text a bit centered.

Output

What is an Inline Level Element?

• An inline-level element behaves differently compared to block-level elements.
• Their primary behavior is they sit next to each other horizontally.
• It doesn’t take up the full width available. It only takes up as much space as needed.
• CSS properties, such as height, width, margin-top or margin-bottom can’t be set.

Inline-Level Elements in HTML

Let us see some of the inline-level elements we have in HTML.

For the complete list of HTML inline-level elements, please click here.

Example

OK, let’s have our second example below.

1. Let's create a couple of span inside a parent div.
   HTML

   <div>
     <span class='noEffect gutter'>Code Project Rocks</span> 
     <span class='noEffect gutter spaceInBetween'>Do you agree?</span> 
   </div>

   Ignore the classes; for now, we'll go to that in the next step.

2. Create a noEffect class.
   CSS

   .noEffect{
     height: 500px; /*no effect*/
     width: 1000px; /*no effect*/
     margin-top: 500px; /*no effect*/
     margin-bottom: 500px; /*no effect*/
   }

   This class noEffect shows us that height, width, margin-top and margin-bottom have no effect or are totally ignored on an inline-level element, and it is making sense that it won't be called inline-level if these properties aren't ignored. Again, the purpose of this class is to remind us that inline-level elements ignore these properties.

3. Create a gutter class.
   CSS

   .gutter{
     padding: 5px 10px; /*this makes the spans a bit taller, remove this to see its effect*/
   }

   This class only shows that we can make the span a bit taller and/or wider, and if you decided to remove this, it would go back to its original size.

4. Create spaceInBetween class:
   CSS

   .spaceInBetween{
     margin-left: 15px;
   }

   This class only shows that we can give the inline elements a bit of space to each other.

5. Style the span:
   CSS

   span {
     background-color: #f90;   /*sets the background-color of div*/
     outline: 2px solid green; /*line that is drawn around elements*/
   }

Output

What is an Inline Block Level Element?

If you want the best of both worlds, we can use inline-block level elements and we can achieve this by setting the display property in CSS into inline-block.

As you can see from the previous section, we have seen the block and inline-level elements in HTML. By default, when you declared any HTML (block or inline-level) element, CSS's display property knows exactly what its value would be.

However, we can override that in CSS by changing the value of the display property.

Change the Display Property of the <h1> Element in our First Example into Inline.

h1{
  font-weight: bold;         /*sets the h1 text to bold*/
  color: #FF4136;            /*sets the text color of h1*/
  background-color: #9dffa1; /*sets the background-color of h1*/
  outline: 1px solid green;  /*line that is drawn around elements*/
  height: 100px;             /*ignored when display sets to inline*/
  width: 300px;              /*ignored when display sets to inline*/
  padding: 10px 5px;         /*adjusted just to make sure they look a nice*/
  display:inline;
}

Output

Change the Display Property of the <span> Element in our Second Example into an inline-block

Doing this, the noEffect the class won't be ignored, and the previous styles would be applied. That's why we'll make some small changes with this class to make the elements a bit presentable. However, I'll be showing the entire CSS with the changes made to the noEffect class.

Note: If you decided not to change the display property only, you'd see unpresentable HTML elements.

.noEffect{
  height: 50px;             /*has now an effect*/
  width: 150px;             /*has now effect*/
  margin-top: 20px;         /*has now an effect*/
  margin-bottom: 20px;      /*has now an effect*/
}

span {
  background-color: #f90;   /*sets the background-color of div*/
  outline: 2px solid green; /*line that is drawn around elements*/
  display:inline-block;
}

.gutter{
  padding: 15px 100px;    /*this makes the spans a bit taller, remove this to see its effect*/
}

.spaceInBetween{
  margin-left: 15px;
}

Output

Understanding the <div> and <span> Tags

Fundamentally, HTML focuses on the page's structure; thus, having an HTML element applies meaning to the content. Like for example <p> makes a paragraph, <h1> makes a heading, etc.

However; these tags <div> and <span> are like empty containers you fill with content. Our previous section has shown that a <div> is a block-level element, while <span> is an inline-block level element. Moreover, these tags have no visual properties (meaningless). Therefore you can use CSS to make them look good as you want. 

Here are things we need to remember about <div> and <span>

• The <div> tag is a division, which indicates any discrete block of content like a paragraph. However, its primary use is to subdivide a page into logical areas, like a container, header, banner, footer, sidebar, etc. Therefore, the <div> is generic – it's merely a block-level element used to divide a page into sections. 
• The <span> tag primary use for inline elements, like words or phrases in a paragraph or heading. For example, you can use a <span> tag to indicate the company's name, brand, or text within the paragraph's section or heading. Then, use CSS to modify and style the text using a different color, fonts, and whatever come into mind.

Summary

This post has shown the types of block and inline-level HTML elements and how they behave when CSS properties (related to the box model) are applied. Not only that, we have seen how to use the inline-block in the last section of this post to see the best of both worlds and how the sample has changed its behaviors when converted into inline and inline-block.

I hope you have enjoyed reading this article, as much as I have enjoyed writing it. Stay tuned for more. Until next time, happy programming!

History

• 16^th January, 2021: Initial version
• 9^th February, 2021: Added the <div> and <span> tag concepts