CSS -Inline -Block

Jedes Element von HTML wird als Box im Webbrowser behandelt. Deshalb ist ihre Anzeige in einem Webbrowser sehr wichtig und wirkt sich auf das Layout aus. CSS bietet jedoch zwei Arten von Boxen, Inline und Block. Sie können eine von ihnen entsprechend dem Seitenfluss und in Bezug auf andere Felder auf der Seite verwenden.

In diesem Blog führen Sie die Anzeige von CSS -Inline- und Blockelementen. Also beginnen wir beginnen!

Was sind die CSS -Anzeigeneigenschaftswerte?

Drei Werte der CSS -Anzeigeeigenschaft sind unten aufgeführt:

• Block: Die Blockelemente beginnen in einer neuen Linie und füllen die gesamte Breite von links nach rechts aus.
• im Einklang: Die Inline -Elemente erscheinen in derselben Zeile.
• Inline-Block: Inline-Block-Eigenschaftswert entspricht dem Inline-Wert, bietet jedoch auch Margen- und Polstereigenschaften für das Element.

Lassen Sie uns jeden von ihnen durch einen Beispiel eins nacheinander näher erläutern!

Beispiel

In der HTML -Datei hinzufügen

Element zur Bereitstellung von Inhalten für den Webbrowser.

Html

Beste CSS -Tutorials

Eigenschaft Anzeige: Block

Der "BlockDas Anzeigen bringt das Element in die neue Zeile und nimmt die gesamte Breite der Seite ein. Wenn Sie seine Größe ändern möchten, verwenden Sie die Breiten- und Höheneigenschaften von CSS.

Wenden Sie jetzt in CSS das anAnzeige"Eigenschaftswert als" festgelegt "Block”In den hinzugefügten Absatz und zuweisen Sie die“Grenze" als "5px fester RGB (204, 13, 172)”. Der Rand bedeutet das Verhalten von Anzeigeeigenschaften.

CSS

Das unterbereitete Bild gibt das Verhalten der Blockanzeigeneigenschaft an, wie wir oben beschrieben haben:

Eigenschaft Anzeige: Inline

Der "im EinklangDie Eigenschaft bringt das Element nicht in die nächste Zeile, und eine der Eigenschaften der Breite und der Höhe beeinflusst diese Eigenschaft nicht.

In CSS werden wir jetzt die zuweisen “Anzeige"Eigenschaftswert als"im Einklang”.

CSS

Anzeige: Inline;

Das untergegebene Bild zeigt an, dass der Text inline ist:

Anzeigeeigenschaft: Inline-Block

Dieser Wert funktioniert genauso wie der Inline -Anzeigewert. Der Unterschied besteht. Darüber hinaus können Sie auch seine Breite und Höhenwerte entsprechend Ihren Vorlieben festlegen.

CSS

Anzeige: Inline-Block;

Unten ist das Bild, das das Inline-Block-Element ohne Breite und Höheneigenschaften anzeigt:

Um den klaren Unterschied zwischen Inline- und Inline-Block-Display zu sehen. Lassen Sie uns ein praktisches Beispiel durchsehen.

Beispiel: Unterschied zwischen Inline und Inline-Block

Im Abschnitt unten erwähnter Code haben wir einen Absatz verwendet

Schild. In diesem Element haben wir zwei platziert “"Mit Klasse"X"Und Klasse"y”.

Notiz: ist standardmäßig ein Inline -Element.

Html

CSS- Cascading = "X"> Stil = "y"> Blatt beschreibt, wie HTML -Elemente auf dem Bildschirm angezeigt werden sollen.

Im CSS -Abschnitt weisen wir den Wert der Anzeigeeigenschaft von Klasse X als “zu“ zuim Einklang"Während Klasse Y mit dem Wert"Inline-Block”. Beachten Sie, dass alle anderen Styling -Eigenschaften ähnlich auf beide Klassen angewendet werden.

CSS

Im folgenden Bild sehen Sie den klaren Unterschied in beiden Klassen, die erste ist inline und der zweite wird in einem Inline-Block angezeigt:

Liste einiger Inline-, Block- und Inline-Block-HTML-Elemente

Viele der HTML-Elemente sind standardmäßig Inline-, Block- oder Inline-Block-Blocks. Einige von ihnen sind unten aufgeführt:

HTML -Inline -Elemente

• Spanne
• A
• img

HTML -Blockelemente

• P
• li
• div
• H1
• Abschnitt

HTML-Inline-Block-Elemente

• Taste
• Eingang
• Textbereich
• wählen

Wir haben das Verhalten von Inline-, Block- und Inline-Block-HTML-Elementen erörtert.

Abschluss

Die CSS -Display -Eigenschaft steuert das Layout der Elemente. Diese CSS-Eigenschaft kann mit drei Werten, Inline, Block und Inline-Block verwendet werden. Jeder Wert repräsentiert ein anderes Verhalten. Insbesondere ähnelt der Eigenschaftswert des Inline-Blocks dem Inline-Wert, bietet jedoch auch Margen- und Polstereigenschaften für das Element. In diesem Artikel haben wir das Eigentum von CSS mit Beispielen erläutert.