Die Unterschiede zwischen Block-Level- und Inline-Elementen

HTML besteht aus verschiedenen Elementen, die als Bausteine von Webseiten dienen. Jedes dieser Elemente fällt in eine von zwei Kategorien: Elemente auf Blockebene oder ein Inline-Element. Den Unterschied zwischen diesen beiden Arten von Elementen zu verstehen, ist ein wichtiger Schritt beim Erstellen von Webseiten.

Elemente auf Blockebene

Was ist also ein Element auf Blockebene? Ein Element auf Blockebene ist ein HTML-Element, das eine neue Zeile auf einer Webseite beginnt und sich über die gesamte Breite des verfügbaren horizontalen Raums seines übergeordneten Elements erstreckt. Es erstellt große Inhaltsblöcke wie Absätze oder Seitenaufteilungen. Tatsächlich sind die meisten HTML-Elemente Elemente auf Blockebene.

Elemente auf Blockebene werden im Hauptteil des HTML-Dokuments verwendet. Sie können Inline-Elemente sowie andere Elemente auf Blockebene enthalten.

Inline-Elemente

Im Gegensatz zu einem Block-Level-Element ist ein Inline-Element:

Es kann innerhalb einer Zeile beginnen.

instagram viewer

Es beginnt keine neue Zeile.
Seine Breite reicht nur so weit, wie es durch seine Tags definiert ist.

Ein Beispiel für ein Inline-Element ist das , wodurch die Schriftart des Textinhalts fett gedruckt wird. Ein Inline-Element enthält im Allgemeinen nur andere Inline-Elemente oder es kann überhaupt nichts enthalten, wie z
Etikett brechen.

Es gibt noch einen dritten Elementtyp in HTML: solche, die überhaupt nicht angezeigt werden. Diese Elemente stellen Informationen über die Seite bereit, werden jedoch nicht angezeigt, wenn sie in einem Webbrowser gerendert werden.

Beispielsweise:

definiert Metadaten.
ist das HTML-Dokumentelement, das diese Elemente enthält.

Umschalten von Inline- und Blockelementtypen

Sie können den Typ eines Elements von Inline in Block oder umgekehrt ändern, indem Sie eine dieser CSS-Eigenschaften verwenden:

```
Bildschirmsperre; 
```
```
Anzeige: Inline; 
```
```
Anzeige: keine;
```

Das CSS Mit der display-Eigenschaft können Sie eine Inline-Eigenschaft in Block oder einen Block in Inline ändern, oder nicht anzeigen überhaupt.

Wann die Anzeigeeigenschaft geändert werden sollte

Im Allgemeinen lassen Sie die Anzeigeeigenschaft in Ruhe, aber es gibt Fälle, in denen das Vertauschen von Inline- und Blockanzeigeeigenschaften nützlich sein kann.

Horizontale Listenmenüs: Listen sind Elemente auf Blockebene, aber wenn Ihr Menü horizontal angezeigt werden soll, müssen Sie die Liste in ein Inline-Element konvertieren, damit nicht jedes Menüelement in einer neuen Zeile beginnt.
Überschriften im Text: Manchmal möchten Sie vielleicht, dass eine Kopfzeile im Text verbleibt, aber die HTML-Kopfzeilenwerte beibehalten. Wenn Sie die Werte h1 bis h6 in Inline ändern, kann Text, der nach seinem schließenden Tag kommt, weiterhin in derselben Zeile daneben fließen, anstatt in einer neuen Zeile zu beginnen.
Entfernen des Elements: Wenn Sie ein Element vollständig aus dem Dokument entfernen möchten normaler Fluss, können Sie die Anzeige auf
```
keiner
```
Eine Anmerkung, seien Sie vorsichtig bei der Verwendung des Displays: keine. Obwohl dieser Stil ein Element tatsächlich unsichtbar macht, möchten Sie damit niemals Text ausblenden, den Sie aus SEO-Gründen hinzugefügt haben, aber nicht für Besucher anzeigen möchten. Dies ist ein todsicherer Weg, um Ihre Website für einen Black-Hat-Ansatz für SEO zu bestrafen.

Häufige Fehler bei der Formatierung von Inline-Elementen

Einer der häufigsten Fehler, den ein Neuling im Webdesign macht, ist der Versuch, eine Breite für ein Inline-Element festzulegen. Dies funktioniert nicht, da die Breite der Inline-Elemente nicht durch die Containerbox definiert wird.

Inline-Elemente ignorieren mehrere Eigenschaften:

```
Breite
```
und
```
Höhe
```
```
maximale Breite
```
und
```
maximale Höhe
```
```
Mindestbreite
```
und
```
Mindesthöhe
```

Microsoft Internet Explorer (ersetzt durch Microsoft Edge) hat in der Vergangenheit einige dieser Eigenschaften fälschlicherweise sogar auf Inline-Boxen angewendet. Dies ist nicht normenkonform. Dies ist bei neueren Versionen des Webbrowsers von Microsoft möglicherweise nicht der Fall.

Wenn Sie die Breite oder Höhe definieren müssen, die ein Element einnehmen soll, sollten Sie dies auf das Element auf Blockebene anwenden, das Ihren Inline-Text enthält.