Im folgenden Code versuche ich, das h1-Element mit einem oberen Rand zu versehen. Wenn ich die Position in css inline einstelle, wird der Rand oben nicht angezeigt. Aber wenn ich es zu Inline-Block ändere, tut es das. Ich frage mich, ob jemand erklären kann, warum das so ist. Danke.
EDIT: Hier ist der Code in jsfiddle: Ссылка
Hier ist mein HTML:
%Vor%Und hier ist das CSS
%Vor%Abschnitt 9.2.4 der CSS2-Spezifikation besagt:
Inline-Block
Dieser Wert bewirkt, dass ein Element einen Blockcontainer inline-level generiert . Das Innere eines Inline-Blocks ist als Blockfeld formatiert, und das Element selbst ist als atomare Inline-Level-Box formatiert.inline
Dieser Wert bewirkt, dass ein Element eine oder mehrere Inline-Boxen generiert.
Weiter geht es in der CSS2-Spezifikation ( Abschnitt 9.4.2 ) dass Inline-Elemente nur horizontale Ränder berücksichtigen ( Proof ):
In einem Inline-Formatierungskontext werden die Boxen horizontal hintereinander angeordnet, beginnend am Anfang eines umschließenden Blocks. Horizontale Ränder, Rahmen und Abstände werden zwischen diesen Feldern berücksichtigt.
Der Unterschied zwischen inline und inline-block besteht darin, dass inline -Elemente als Inline-Elemente behandelt werden, während inline-block -Elemente effektiv als Blöcke behandelt werden (die visuell miteinander verknüpft sind).
Elemente auf Blockebene berücksichtigen sowohl horizontale als auch vertikale Ränder, während Elemente auf Inline-Ebene nur horizontale Ränder berücksichtigen.
Das <h1> -Tag ist standardmäßig ein Blockelement , das Ränder erlaubt. Wenn Sie display: inline verwenden, wird daraus ein Inline-Element, z. B. ein span-Tag, das keine Ränder zulässt.
Mit display: inline-block können Sie beide Funktionen beider Elemente verwenden.
Zeigt ein Element als Blockcontainer auf Inline-Ebene an. Das Innere von Dieser Block ist als Block-Level-Box formatiert, und das Element selbst ist als Inline-Level-Box formatiert
Referenz: w3schools
Nur Elemente auf Blockebene können Ränder haben. geben es 'display: inline; zwingt es (nicht überraschend), ein inline -Element zu werden und damit seinen Rand zu verlieren.
Versuchen Sie, inline-block zu verwenden, wenn Sie inline mit anderen Inhalten beibehalten und die Margen nutzen möchten. . .