Kennen Sie einen guten Artikel über "Wann display:block bei :inline und wann :inline-block " und warum?
und wann müssen wir die Anzeige überschreiben: ?? durch CSS für jedes HTML-Tag / Element?
inline - Behandelt das Element als wäre es ein Inline-Textstück. width und height sind bedeutungslos
block - Behandelt das Element als Rechteck. width und height können angegeben werden
inline-block - Fließt ein Element inline mit dem Text, erlaubt aber die Angabe von width und height .
Elemente sind ohnehin auf einen dieser Werte voreingestellt. Zum Beispiel:
<span> , <em> , <strong> - & gt; inline
<div> , <p> - & gt; block
Die Anwendungsfälle für Block und Inline sind ziemlich offensichtlich. Verwenden Sie inline, wenn Sie einen Stil auf eine kurze Textspanne anwenden möchten (z. B. einige Wörter), und verwenden Sie block für Rechtecke mit Breite / Höhe.
Wie für den Inline-Block wird er natürlich für Bilder verwendet. Es ist nützlich, wenn kleine Blöcke von links nach rechts und von oben nach unten wie normaler Text fließen sollen, aber immer noch Blöcke haben.
Hinweis: In 90% der Fälle müssen Sie die Eigenschaft display nicht angeben. Verwenden Sie einfach die entsprechenden Elemente mit Klassen wie <strong> oder <em> für Inline, <div> oder <p> für Blöcke . Der wichtigste Weg, es ins Spiel zu bringen, ist, wenn man Dinge mit Javascript versteckt, man muss nur das Element zu seinem ursprünglichen / natürlichen Anzeigeattribut zurücksetzen.
Standardmäßig wird eine Division als Block angezeigt. Dies stellt es auf eine eigene Linie und erweitert, um seinen Behälter zu füllen. Ein Inline-Element macht grundsätzlich eine Aufteilung in einen Span (im Default-Zustand). Sie können nicht mehr viel darauf anwenden und es wird inline mit jedem Text angezeigt. Sie können einen Median zwischen den beiden erhalten: Inline-Block. Dies ermöglicht mehr Styling auf der Abteilung, einschließlich der Einstellung einer Breite und Höhe, aber zeigt immer noch die 'Block' inline mit dem Text, Art eines Bildes.
Inline, Inline-Block und Block sind also mehr wie Ebenen eines Elements, jedes mit bestimmten Stilen, die nicht auf das Element angewendet werden können / können.
Tags und Links css xhtml semantic-markup