HTML- Block und Inline-Elemente
Jedes HTML-Element hat einen Standardanzeigewert, je nachdem, um welchen Elementtyp es sich handelt.
Es gibt zwei Anzeigewerte: Block und Inline.
Elemente auf Blockebene
Ein Element auf Blockebene beginnt immer in einer neuen Zeile.
Ein Element auf Blockebene nimmt immer die volle verfügbare Breite ein (dehnt sich so weit wie möglich nach links und rechts aus).
Ein Element auf Blockebene hat einen oberen und einen unteren Rand, ein Inline-Element dagegen nicht.
Beispiel
<div>Hello World</div>
Hier sind die Elemente auf Blockebene in HTML:
Inline-Elemente
Ein Inline-Element beginnt nicht in einer neuen Zeile.
Ein Inline-Element nimmt nur so viel Breite ein wie nötig.
Dies ist ein <span>-Element innerhalb eines Absatzes.
Beispiel
<span>Hello World</span>
Hier sind die Inline-Elemente in HTML:
Hinweis: Ein Inline-Element kann kein Block-Level-Element enthalten!
Das <div>-Element
Das <div>Element wird oft als Container für andere HTML-Elemente verwendet.
Das <div>Element hat keine erforderlichen Attribute, aber style, classund idsind üblich.
Wenn es zusammen mit CSS verwendet wird, kann das <div>Element verwendet werden, um Inhaltsblöcke zu stylen:
Beispiel
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
Das <span>-Element
Das <span>Element ist ein Inline-Container, der verwendet wird, um einen Teil eines Textes oder einen Teil eines Dokuments zu markieren.
Das <span>Element hat keine erforderlichen Attribute, aber style, classund idsind üblich.
Wenn es zusammen mit CSS verwendet wird, kann das <span>Element verwendet werden, um Teile des Textes zu stylen:
Beispiel
<p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes
and my father has <span style="color:darkolivegreen;font-weight:bold">dark
green</span> eyes.</p>
Kapitelzusammenfassung
- Es gibt zwei Anzeigewerte: Block und Inline
- Ein Element auf Blockebene beginnt immer in einer neuen Zeile und nimmt die gesamte verfügbare Breite ein
- Ein Inline-Element beginnt nicht in einer neuen Zeile und nimmt nur so viel Breite wie nötig ein
- Das
<div>Element ist ein Block-Level und wird oft als Container für andere HTML-Elemente verwendet - Das
<span>Element ist ein Inline-Container, der verwendet wird, um einen Teil eines Textes oder einen Teil eines Dokuments zu markieren
HTML-Tags
| Tag | Description |
|---|---|
| <div> | Defines a section in a document (block-level) |
| <span> | Defines a section in a document (inline) |
Eine vollständige Liste aller verfügbaren HTML-Tags finden Sie in unserer HTML-Tag-Referenz .