CSS

CSS – What is the difference between display: inline and display: inline-block

display: inline

  • The display-inline property is used to transform a block level element to an inline element. When we apply this to a <div></div>, an <li></li> or a <p></p> it’s akin to converting it to a <span></span>.

display: inline-block

  • You can create a grid of boxes that fills the browser width and wraps nicely. This has been possible for a long time using float, but now with inline-block it’s even easier. inline-block elements are like inline elements but they can have a width and height.

Difference between display: inline and display: inline-block

  • Imagine a <span> element inside a <div>. If you give the <span> element a height of 100px and a red border for example, it will look like this with

display: inline

display: inline-block

 

  • Elements with display:inline-block are like display:inline elements, but they can have a width and a height. That means that you can use an inline-block element as a block while flowing it within text or other elements

Difference of supported styles as summary:

  • inline: only margin-left,
  • margin-right,
  • padding-left,
  • padding-right
  • inline-block: margin,
  • padding, height, width
  • display: inline; is a display mode to use in a sentence. For instance, if you have a paragraph and want to highlight a single word you do:
css code
<p>
    Pellentesque habitant morbi <em>tristique</em> senectus
    et netus et malesuada fames ac turpis egestas.
</p>
  • The <em> element has a display: inline; by default, because this tag is always used in a sentence. The <p> element has a display: block; by default, because it’s neither a sentence nor in a sentence, it’s a block of sentences.
  • An element with display: inline; cannot have a height or a width or a vertical margin. An element with display: block; can have a width, height and margin.
  • If you want to add a height to the <em> element, you need to set this element to display: inline-block;. Now you can add a height to the element and every other block style (the block part of inline-block), but it is placed in a sentence (the inline part of inline-block).
READ  [Solved - 10 Answers] Click through a DIV to underlying elements

About the author

Wikitechy Editor

Wikitechy Editor

Wikitechy Founder, Author, International Speaker, and Job Consultant. My role as the CEO of Wikitechy, I help businesses build their next generation digital platforms and help with their product innovation and growth strategy. I'm a frequent speaker at tech conferences and events.

X