Learn about Block, Inline and Inline-block in CSS

Tram Ho

We will learn together 3 styles of displaying elements in CSS that are Block, Inline and Inline-block to see if they are different!

Before entering the article, suppose we have the following HTML code:

We’ll add a bit of CSS for the above classes:

Then on the interface we will see everything displayed like this:

1, Inline

  • The element with the display property of type Inline will be on the same line as the elements next to it.
  • We can treat the Inline element as words belonging to a paragraph. When there is a blank space, it is next to the previous element.
  • The distance between the Inline element and its adjacent elements is set to default as the font-size word spacing
  • We cannot define width, height, padding, and vertical margin (top, bottom) properties for Inline elements.

We can try adding the width and height properties to the CSS for the Inline element:

And try to see the results:

Everything remains the same.

2, Block

  • The element with the display property of type Block will be on a separate line.
  • We can treat the Inline element as a separate paragraph, separate from the parts above and below it
  • With elements of type Block, it is completely possible to define the width and height for it (the default value is 100% of the parent element).

If we comment on the width and height attributes in the above example:

Then the results are as follows:

Clearly, width and height have an effect on the Block property.

3, Inline-block

If you want to display your Elements in the Inline style, but want to align the width, height, padding and margin vertically, this is what you need.

Inline-block is a combination of Inline and Block, it can both display on the same line as Inline, and can align the values ​​as stated above like Block.

Just like in the Block, let’s try to comment on the width and height properties in the Inline-block’s CSS snippet:

This time I will not post the results for you to try to experience it!

Try creating a navigation-bar with Inline-block

Given the features of Inline-block, let’s try creating a navigation-bar along with it. Here I will focus on the properties of Inline-block so I will not do it too well: v

4, References

  1. https://www.w3schools.com/html/html_blocks.asp
  2. https://www.w3schools.com/css/css_inline-block.asp
Share the news now

Source : Viblo