CSS DISPLAY PROPERTIES: BLOCK, INLINE & INLINE-BLOCK

Folks! Some of the CSS display properties we mostly use are BLOCK, INLINE, and INLINE-BLOCK. Let us dive into these widely used display properties and have a clear understanding of their differences.

Display: block
A block-level element has the following behaviors.

• Takes full width by default.
• Each element starts with a new line.
• Width and height can be set Examples of block-level elements include:-

  Display: inline
  An inline element has the following behaviors.
  -placed side by side. unlike block element which starts on a new line, inline elements can be displayed side by side.
  -Takes space as much as needed.

  • Width and height can’t be set. Examples of inline elements include:-

  The following is a screenshot that shows the difference between the display Block and the display Inline property.

  

  On the left side of the screen, you can see the HTML file, and on the right is the web page. So as you can see without any CSS the three div elements are displayed each on a new line however the span tags are being displayed side by side.

  Now let’s add some styles to the elements so that you can see the difference better.

  

  Now as we can see, the border I gave to the div elements occupies the full width of the page because they have a display property of block, and the border of the span tags ends just after the text is finished.

  Now let’s add some width and height to the elements.

  

  As we can see, the div elements take the width and height defined in the styles while the span elements do not get affected by the styles because as we said earlier, in inline elements we can not set the width and height properties.

  Would it be nice if we could just set the width and height property to an element and also place them side by side? luckily, there is a third way that allows us to do that and you guessed it right, it is called inline-block.

  Display: inline-block
  As we can understand from its name, it is a combination of block and inline features.

  • Width and height can be set -placed side by side. In the below screenshot, note that the elements can now be set side by side and also have width and height defined in the styles.

  

  Understanding and applying these display properties will empower you to create well-structured, visually appealing web layouts. By making informed choices, you can enhance the readability and user experience of your web pages.