Ceyhun's Dev Blog

What is CSS display property?

“There are 8 ways to do the same thing”

“Should I use inline or block?”

We all have those questions popping in our heads when we try to build something new with HTML / CSS, how the elements are going to be displayed? on top of each other? side by side?

It can be frustrating when you’re just starting to learn HTML / CSS.

So, let’s take a look at what display property is?

There are plenty of display values, we’re going to focus on just 4 of them. Those are:

display: block;

    <!doctype html>
    <html lang="en">
      <meta charset="utf-8">
      <div class="bun">Bun</div>
      <div class="cucumber">Cucumber</div>
      <div class="onion">Onion</div>
      <div class="bacon">Bacon</div>
      <div class="cheese">Cheese</div>
      <div class="meat">Meat</div>
      <div class="tomato">Tomato</div>
      <div class="lettuce">Lettuce</div>
      <div class="bun">Bun</div>


display: inline;

    <!doctype html>
    <html lang="en">
      <meta charset="utf-8">
      <span class="locomotive">Locomotive</span>
      <span class="wagon-1">Wagon 1</span>
      <span class="wagon-2">Wagon 2</span>
      <span class="wagon-3">Wagon 3</span>
      <span class="wagon-4">Wagon 4</span>
      <span class="wagon-5">Wagon 5</span>


display: inline-block;

display: none;

Let’s take a look at how they interact with each other

We learned what inline, inline-block, block level elements are. It’s time to see how they work together.

Imagine you purchased two paintings, a TV, and a TV unit to decorate your favorite corner of the house.

First, you put the TV between the paintings vertically and the TV unit at the bottom. (display: block; on each element)


Hmmm, that looks ‘fine’ but I think we can do better. Let’s put paintings and the TV side by side (display: inline;)


That didn’t work either. ( Remember, we cannot control width and height properties of inline elements ) I think we can make it work by giving each of them the space they need. ( display: inline-block; )


Yay, it worked. As a finishing touch, let’s center that TV unit at the bottom ( display inline-block at TV unit element ).


So, you might ask how that TV unit is centered automatically. Because we gave text-align: center; property to their parent element.

You can take a further look at this codepen, to view source code click Change View at the top right corner, and select Editor View.

Further Reading:

#css #display #none #block #inline-block #inline