Verständnis von Block-, Inline- und Inline-Block-Elementen
HTML-Elemente verhalten sich unterschiedlich, je nachdem, ob sie Block, Inline oder Inline-Block sind. Diese Anzeigearten beeinflussen das Layout, die Abstände und die anwendbaren CSS-Eigenschaften.
Block-Elemente
- Beginnen in einer neuen Zeile;
- Nehmen die volle Breite ihres Containers ein;
- Unterstützen width, height, margin, padding und border.
Häufige Beispiele: <div>, <p>, <ul>, <li>, <h1>–<h6>.
index.html
index.css
Inline-Elemente
- Bleiben in derselben Zeile;
- Nehmen nur den für ihren Inhalt benötigten Platz ein;
- Breite oder Höhe kann nicht angewendet werden (aber Rahmen funktioniert).
Häufige Beispiele: <a>, <span>, <img>, <input>.
index.html
index.css
Inline-Block-Elemente
- Bleiben inline, wie Text;
- Unterstützen Breite, Höhe, Außenabstand (margin), Innenabstand (padding) und Rahmen (border), wie Block-Elemente.
Beispiele: <button>, <select>, <textarea>.
Sie sind nützlich, wenn Elemente nebeneinander stehen sollen, aber dennoch vollständige Gestaltungsmöglichkeiten benötigt werden.
index.html
index.css
1. Was ist der Hauptunterschied zwischen Block- und Inline-Elementen?
2. Welches der folgenden ist ein Beispiel für ein Block-Element?
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Großartig!
Completion Rate verbessert auf 2.56Verständnis von Block-, Inline- und Inline-Block-Elementen
Swipe um das Menü anzuzeigen
HTML-Elemente verhalten sich unterschiedlich, je nachdem, ob sie Block, Inline oder Inline-Block sind. Diese Anzeigearten beeinflussen das Layout, die Abstände und die anwendbaren CSS-Eigenschaften.
Block-Elemente
- Beginnen in einer neuen Zeile;
- Nehmen die volle Breite ihres Containers ein;
- Unterstützen width, height, margin, padding und border.
Häufige Beispiele: <div>, <p>, <ul>, <li>, <h1>–<h6>.
index.html
index.css
Inline-Elemente
- Bleiben in derselben Zeile;
- Nehmen nur den für ihren Inhalt benötigten Platz ein;
- Breite oder Höhe kann nicht angewendet werden (aber Rahmen funktioniert).
Häufige Beispiele: <a>, <span>, <img>, <input>.
index.html
index.css
Inline-Block-Elemente
- Bleiben inline, wie Text;
- Unterstützen Breite, Höhe, Außenabstand (margin), Innenabstand (padding) und Rahmen (border), wie Block-Elemente.
Beispiele: <button>, <select>, <textarea>.
Sie sind nützlich, wenn Elemente nebeneinander stehen sollen, aber dennoch vollständige Gestaltungsmöglichkeiten benötigt werden.
index.html
index.css
1. Was ist der Hauptunterschied zwischen Block- und Inline-Elementen?
2. Welches der folgenden ist ein Beispiel für ein Block-Element?
Danke für Ihr Feedback!
