Block, Inline and Inline-block

Understaning how block, inline, and inline-block each behave is very important when learning CSS, as well as knowing why you might want to switch the display property of an element every now and then.

The tag I am currently writing in now the <p> tag has a default display property of block. The same goes for <div> tags, they are also a block element and have the default display value of block. Let's look at a visual example below

I will demonstrate using the background color to show you a block display value. Using a background colour we can see how the block goes from the left side of the page all the way to the right side of the page. Notice even where the paragraph stops the colour still runs to the end of the page showing the block.

Block elements will always stack on top of one another, even if there is room to place next to one another in your code. I have added a little bit of margin to seperate the colour just to exaggerate the example. By default they will take up 100% width of a page meaning if you were to resize the window they will still span from left to right.

Here are some examples of block-level elements

<div>
<h1 - h6>
<p>
<form>
<header>
<footer>
<section>

If we now take a look at the inline display value and using the same technique showing colour to represent how it looks we see that the big distinction is an inline element will only take up the width of the content themselves. Here we can see a span element which its default display value is inline

Here are some examples of inline-level elements

<span>
<a>
<img>
<button>
<strong>
<script>
<video>

Now lets see where we could use an inline-block element. Here I have added a link/button.Now watch what happens when I duplicate the code and add padding to the inline element link/button.The element's padding is now messing with our paragraph block element. In order to solve this issue lets apply the inline-block styling and see what happens..link/button.Now we see that the link/button element acts as a block element pushing the paragraph above and below it. It also remains inline so our paragraph text will wrap around it. An important thing to note is that whatever is wrapped around a block-inline element it will inherit the height of any styling that changes it dimension. In this case here the padding applied to the link/button.

Lets use an image which traditionally has an inline-level element and apply our own display property to it using CSS.

Here we have Earth's greatest hero Goku I have used the <img> element to place him, and as we have learnt the <img> default display value is inline. Meaning it only takes up the size of the element's container. In this case, the picture.

Here we have Earth's greatest hero Goku In this case I have applied the css styling display: block;. Now we see like our background colour from earlier that the element (Goku) is utilizing the entire width of the webpage and has stacked our paragraph block above and below the image.