Click here to Skip to main content
15,908,776 members
Articles / Web Development / HTML
Tip/Trick

Block-Level Elements Versus Inline-Level Elements

Rate me:
Please Sign up or sign in to vote.
4.93/5 (5 votes)
17 Jan 2021CPOL6 min read 5.1K   5   3
Shows the difference between block-level elements and inline-level elements in HTML and CSS.
This article will explain the difference between block-level and inline-level elements. Not only that, but we'll also show the best of both worlds when using inline-block.

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

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.

<h1>-<h6> <p> <li> <div> <ul>
<article> <aside> <blockquote> <fieldset> <figcaption>
<figure> <address> <canvas> <figcaption> <footer>
<form> <header> <nav> <section> <ul>

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

Image 1

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.

<a> <span> <i> <b> <strong>
<em> <img> <label> <sub> <sup>
<small> <time> <abbr> <br> <input>
<textarea> <select> <code> <button> <acronym>

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

Image 2

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.

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;             /*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

Image 3

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.

CSS
.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

Image 4

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

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer
Philippines Philippines
Jin humbles himself as a C# programmer and a web developer, who loves backend and middleware development and still improving his skills at the front-end arena. He loves what he does, but far from perfect, here is a list of what he loves to do: read, write and code.
This is a Social Group

2 members

Comments and Discussions

 
GeneralMy vote of 5 Pin
W Balboos, GHB20-Jan-21 2:57
W Balboos, GHB20-Jan-21 2:57 
GeneralRe: My vote of 5 Pin
Jin Vincent Necesario20-Jan-21 4:32
professionalJin Vincent Necesario20-Jan-21 4:32 
Smile | :) Thank you, I'm happy to help, and glad you like it.
Jim Rohn: "Don't wish it was easier, wish you were better". Subscribe to my blog @ https://jinnecesario.com/.

GeneralRe: My vote of 5 Pin
W Balboos, GHB20-Jan-21 4:36
W Balboos, GHB20-Jan-21 4:36 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.