CSS Basics Layout Fundamentals: Block, Inline & Inline Block

Each HTML element has a default display property, primarily: "block" or "inline" or "none". The catch is you can override the behaviour of these elements by interchanging their values or simply assigning it another value such as inline-block, flex, grid, block etc. Well, if you were to apply display: block; to an already existing block element, you'll notice no change obviously; just an additional line of code. Here, we are going to look at three of these values: block, inline and inline-block.

TL:DR;

The above table describes, at any given point, which attributes you can apply to what elements. Trust me, knowing this is extremely important especially for setting the foundation for your future CSS exploration phase.

Let us walk through an example to dig deeper:

Block-level Element:

• Let’s create a container using <div>. I've assigned it a class. If you're yet to explore this topic, think of classes as a nickname.
• Add a few paragraphs inside the <div> container.
• Lastly, let's give our container and paragraphs some border and background.

<div class="head">
  <p>
    I am a paragraph, a block element. I cover full-width of 
    the page just like my container, div. "See my borders".
  </p>
  <p>
    I am an <span class="span-1">inline span element</span> 
    inside a block element. They allow me to get some space on 
    the right/left but not top/bottom :(
  </p>
  <p>
    Here comes the best of both worlds, inline-block. 
    The <span class=span-2>inline-block</span> 
    to the rescue. 
  </p>
</div>

.head {
  background-color: #f1425d;
  color: #fff;
  height: 280px;
}

.head p {
  padding: 10px;
  border: 5px solid #39ff14;
}

Inline Elements:

• Look at the second & third paragraph in the above code. Did you notice something?
• Yes! An inline span element is embedded inside the <p> tags.
• Let's add some styles to make them stand out.
• Try giving span-1 some margin on the top, you'll notice nothing happens. If it were to happen, that'd be technically break the flow of the layout, no?

.span-1, .span-2 {
  background-color: #000;
  color: white;
  width: 100%; /* oh common, I am an inline element */
}

.span-1 {
  margin-top: 50px; /*nothing happens*/
  padding: 5px 30px;
}

Inline-Block Elements:

• Did you see how they behaved? No line-breaks or respect for margins.
• Let's change the display property for span-2 and try giving it some margins. Tada!

.span-2 {
  display: inline-block; /* check this out */
  margin-top: 10px;
  margin-bottom: 10px;
}

Additional: Same element but different display values:

• Let's try giving different display properties to the same tag, in this case, headings and give them some background + borders to be able to see the difference.
• You'll see h1 still occupies the full-width but h2?

<h1>I am another block-level element just stretching out.</h1>
<h2>Am a smaller heading yet a block element. 
But, you can override my behaviour by changing the display property.</h2>

h1 {
    border: 2px solid red;
    padding: 10px;
    margin-top: 10px;
}

h2 {
  border: 2px solid purple;
  padding: 10px;
  margin-top: 20px; /* Now, I can't make this happen. */
  display: inline; /* but you can fit another element (img?) next to me! */
  width: 100%: /* why? but why? told you won't work :p */
  height: 500px; /* okay, bye! */
}

I've posted the final code here.

Thank you for taking the time out to read this post, hopefully you find this helpful.