Das div ist das Quintessential Block Level Element, und das span ist das Inline Gegenstück. Sie sind die einfachste Form dieses Anzeigetyps und weisen keine anderen Eigenschaften auf. In vielen Fällen werde ich einer von ihnen den Stil geben:
Dadurch verhalten sie sich sehr praktisch. Für div bedeutet das Boxen, die leicht nebeneinander sitzen, während sie ihre Breite und Höhe wie definiert beibehalten. Für die span kann ich daraus bunte Rechtecke machen. Die Anzeige inline-block ist für so viele Dinge großartig, aber ich habe noch nie ein Element gesehen, das als inline-block startet, ohne dass etwas anderes passiert.
Bilder ( img ) sind, aber offensichtlich nicht sind für die gleichen Dinge wie div geeignet, sie haben diesen Stil, erfüllen aber einen anderen Zweck.
Gibt es also ein Element, von dem ich nicht weiß, dass es das Quintessential inline-block ist, oder wird das weggelassen?
Und wenn nicht, warum? Die Verwendungen von inline-block sind zahlreich, daher scheint es, dass es ein Element geben sollte, das diese grundlegende Form annimmt.
Es gibt kein solches Element und es gibt einige gute Gründe dafür.
inline-block hat mehrere Anwendungen im zeitgenössischen Webdesign. Es ist jedoch nicht Teil des ursprünglichen Designs , das nur Block enthält und Inline-Elemente. Stattdessen wird es von <img> abgeleitet, wie es von NSCA Mosaic hinzugefügt wurde. (Das verwendet das falsche Markup und half, das ursprüngliche "Responsive Design" zu besiegen denke, wir haben gerade erst damit begonnen, die Probleme mit img zu beheben.
Weiter unten in der Zeitleiste war inline-block immer noch nicht Teil von IE4 oder 5 oder irgendeiner Version von Netscape. Es war nicht Teil der frühen HTML4-Ära. Wir würden also nicht erwarten, Ihr hypothetisches Element in dieser Version des Standards zu finden. inline-block erscheint nur in CSS2, das nach HTML4 kam. (Sehen Sie sich den Referenzabschnitt in jedem Standard an).
Im Gegensatz zu block , inline-block wird durch Leerzeichen im Markup beeinflusst . Es wird durch den Namen impliziert, und es ist das, was Sie von <img> in der Mitte eines Textes erwarten würden (aka WordProcessor-Objekt verankert als "Zeichen"). Aber jenseits seiner Ursprünge wird das Whitespace-abhängige Markup bald sehr mühsam. Ich würde nicht erwarten, dass W3C HTML5 dies in einem neuen Element festschreibt.
Die Angabe würde sicherlich einen Streit über "Semantik", Trennung von Inhalt und Präsentation usw. beinhalten. (Sowie, wie man es nennt :). Und wenn das Standard-Rendering Leerzeichen bedeutungsvoll macht - ist das nicht Teil der Semantik dieses Elements? Verwenden Sie Bilder, um Wörter - oder einzelne Buchstaben eines Wortes (mit entsprechendem Alt-Text) darzustellen. Dies veranschaulicht, dass das Vorhandensein von Leerräumen (oder nicht) um dieses Element semantisch signifikant ist, genau wie das Vorhandensein von Leerzeichen, die Wörter mit signifikantem Gewicht trennen. Das scheint mir ein großes Problem zu sein.
inline-block wird oft als moderne Alternative zur Verwendung von float überall propagiert. Aber beides ist wirklich nicht geeignet. Aus diesem Grund standardisiert CSS3 neue Layout-Modi: "flexbox" und "grid , um moderne responsive Designs mit einem echten, sauberen Markup zu unterstützen. Kein Dummy-Markup (oder Dummy-generierter Inhalt). Kein Hacking um Whitespace-Abhängigkeit.
Die einzigen Elemente, die ich mir vorstellen kann, haben eine Inline-Erscheinung, aber erlauben, dass width und height gesetzt werden, sind:
img , input , textarea select und button Das einzige Element hier, das HTML-Inhalt annehmen kann, ist das button -Element; was nicht eine ideale Verwendung von button ist, da es ein Element sein soll, mit dem der Benutzer interagieren könnte / sollte; anstatt nur ein Containerelement.
Obwohl Sie möglicherweise mehrere Verwendungen für ein solches Element haben, gibt es keinen überzeugenden Grund. Angesichts der Leichtigkeit, mit der die display -Eigenschaft geändert werden könnte, sollte das W3C oder eine andere Autorität dies explizit definieren. vor allem, da der einzige Unterschied zwischen inline und inline-block die Möglichkeit ist, Dimensionen und margin zuzuordnen.
Das img-Tag ist standardmäßig ein Inline-Block:
Bearbeiten: Sie können diese SO-Frage überprüfen: ist & lt; img & gt; Element Block Level oder Inline Level?