display:inline-block

[Camping_RIDER]

Aloha ;)

Finde ich eigentlich blöd umgesetzt, ich würde es fast einen Krabbelkäfer nennen wollen. Die Merkregel ist doch, dass ein Blockelement nicht in ein <p> Element hineingehört, und durch display:inline-block wird dem div nach außen hin seine Block-Eigenschaft genommen.

Nein, Denkfehler. display:inline-block nimmt einem Block-Element nicht die Block-Eigenschaft, auch nicht „nach außen“!

Wie alle CSS-Regeln beeinflusst display:inline-block nicht die Eigenschaften des HTML-Elements / Markups (wäre im Sinne von Separation of concerns auch nicht so cool), sondern beeinflusst alleine die Darstellung des Elements.

Ein Block-Element, das (wegen mir sogar) inline dargestellt wird, ist immer noch ein Blockelement und kein inline-Element. Wenn man einen Elefanten in ein entsprechendes Kostüm steckt sieht er vielleicht aus wie eine zu groß geratene Mücke, er ist aber dann trotzdem kein Insekt.

Der Browser müsste hier den zugewiesenen display-Style beachten, bevor er die Notbremse zieht.

Nein, der Browser macht das richtig. Separation of concerns ist absolut sinnvoll, und das bedingt, dass der Browser eben bei der Interpretation des HTML (und nur hier scheitert die Sache im vorliegenden Fall) CSS nicht hinzuzieht und auch nicht hinzuziehen darf. Für das Markup ist alleine HTML maßgeblich.

Dass inline-block im <p> grundsätzlich geht, zeigt sich, wenn man es so macht:

<p id="hugo">
Paragraph 1: <span>
Hui!
</span>
</p>

#hugo span {
  display: inline-block;
  width: 100px;
  border: 1px solid green;
}

Exakt.

Wie verwerflich ist diese Alternative?

Gar nicht, imho. So sollte das gemacht werden.

Grüße,

RIDER