1

I read about the difference between display: inline and display: inline-block. This question is not about their difference but about their usage which is very different.

I don't understand why would I ever need to use display inline.

It seems like inline-block can do everything inline can and more. Wouldn't declaring an element with display: inline-block without any width, height or vertical margins/padding be the same as declaring the display as inline?

Is there a case where you must use display : inline while trying to achieve the same goal with display: inline-block won't work?

CodeMonkey
  • 11,196
  • 30
  • 112
  • 203
  • To block 'inherited' CSS properties not applicable to inline – Loveen Dyall Jul 02 '19 at 22:11
  • 3
    one trivial use case: you have a long sentence and you want to change it's color, you wrap it inside a `` which is an inline element and you change the color. Use inline-block and see how it behave with line break – Temani Afif Jul 02 '19 at 22:13
  • @LoveenDyall can you show an example of what you mean? – CodeMonkey Jul 02 '19 at 22:14
  • and here is another use case where **inline** was mandatory to achieve the result: https://stackoverflow.com/a/53882402/8620333 – Temani Afif Jul 02 '19 at 22:15
  • See [this comment](https://stackoverflow.com/questions/9189810/css-display-inline-vs-inline-block#comment37724106_9189873) or [this answer](https://stackoverflow.com/a/45061654/3233827) for a scenario where it is necessary to use `display: inline;`. – ssc-hrep3 Jul 02 '19 at 22:20
  • @YonatanNir notice the use of *long sentence* in my comment – Temani Afif Jul 02 '19 at 22:21
  • It's also about semantic . https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Inline_text_semantics Should those tags turn into boxes ? – G-Cyrillus Jul 02 '19 at 23:26

1 Answers1

1

An example from Temani Afif's comment:

<h1>inline</h1>
<p>
This is a sentence. <span style="background-color:red">This is another sentence that's really long and has a lot of words and a lot of clauses and needs to be this way to make the example work so that it breaks to a new line and may or may not be a run-on sentence and is probably long enough now.</span> This is yet another sentence.
</p>

<h1>inline-block</h1>
<p>
This is a sentence. <span style="background-color:red;display:inline-block">This is another sentence that's really long and has a lot of words and a lot of clauses and needs to be this way to make the example work so that it breaks to a new line and may or may not be a run-on sentence and is probably long enough now.</span> This is yet another sentence.
</p>

The first one is implicitly display:inline, and the second one is display:inline-block. Note that the sentence in the span has linebreaks before and after it, whereas the first does not.

Joseph Sible-Reinstate Monica
  • 45,431
  • 5
  • 48
  • 98
  • I just tried running this code in my browser and with both cases, they acted exactly the same:

    some text before. more words inside. and after text.

    – CodeMonkey Jul 02 '19 at 22:24
  • @YonatanNir What browser? The difference is super clear in Chrome, on both desktop and Android. – Joseph Sible-Reinstate Monica Jul 02 '19 at 22:50
  • OK it seemed like I needed a longer sentence to reproduce it. And the questions with the difference between them don't explain about line breaking of inline-block elements – CodeMonkey Jul 03 '19 at 08:35