In diesem Artikel besprechen wir die Eigenschaft „Inline-Block-Elemente“. Es ist eine sehr nützliche Eigenschaft von CSS. Wir können es auf verschiedene Tags anwenden. Es ist Teil der CSS-Anzeigeeigenschaft.
Stringlänge Java
Verwendung:
display: inline-block
Durch Anwenden der obigen Eigenschaft verhält sich das Element für seine untergeordneten Elemente als Inline- und Blockelement. Lassen Sie uns die Inline- und Blockelemente verstehen.
Inline-Elemente
Die Elemente, die nicht in einer neuen Zeile beginnen, werden als Inline-Elemente bezeichnet. Sie werden als Teil des Haupttextes zusammengefasst und nicht als separate Aktion. Diese Elemente nehmen nur den erforderlichen Platz ein. Leerzeichen links und rechts können zu einem Inline-Element hinzugefügt werden, es kann jedoch keine Höhe zum oberen oder unteren Abstand oder Rand eines Inline-Elements hinzugefügt werden.
Beispiel für Inline-Elemente:
Beispiel:
Page Title .highlight{ background-color:#efefef} It is a demo span <span>inline element</span>; whose span is an highlighted with a grey color indicating that it is an inline tag Ausgabe:
Umbenennen eines Verzeichnisses
Blockelemente
Die Elemente, die in einer neuen Zeile beginnen, werden als Blockelemente bezeichnet. Ein Blockelement nimmt die volle für diesen Inhalt verfügbare Breite ein. Im Gegensatz zu Inline gibt es für diese Elemente einen oberen und einen unteren Rand. Elemente auf Blockebene dürfen nur innerhalb des Body-Tags erscheinen. Elemente auf Blockebene erzeugen eine größere Struktur als Inline-Elemente.
Beispiel für Blockelemente:
,
Alter von Pete Davidson
Beispiel:
Page Title p { background-color: #8A55; } <p>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</p> Ausgabe:
wie man eine abstrakte Scheinklasse einfügt
Inline-Blockelemente
Der Anzeigewert von inline-block funktioniert ähnlich wie inline mit einer Ausnahme: Höhe und Breite dieses Elements können geändert werden.
Beispiel:
span.b { display: inline-block; width: 100px; height: 100px; padding: 5px; color:white; border: 1px solid blue; background-color: blue; } This is an example of inline-block element with a span colored as blue <span>Inline-Block</span> Ausgabe:
Unten ist die Ausgabedatei mit allen Elementen auf einer Seite:
Code
span.a { display: inline; /* the default for span */ width: 100px; height: 100px; padding: 5px; border: 1px solid white; background-color: blue; } span.b { display: inline-block; width: 100px; height: 100px; padding: 5px; border: 1px solid white; background-color: green; } span.c { display: block; width: 70px; height: 50px; padding: 5px; border: 1px solid blue; background-color: pink; } <h2>display: inline</h2> This is section with a inline span made blue <span>inline</span> <span>element</span> <h2>display: block</h2> This is section with a block span made pink <span>block</span> <span>element</span> . <h2>display: inline-block</h2> This is section with a inline block span made green<span>inline</span> <span>block</span>