Das Boxmodell
Die unsichtbare Struktur deiner Elemente
Stell dir das HTML-Boxmodell wie ein großes, unsichtbares Schloss vor. Jedes Element ist ein Raum darin, mit Wänden, Möbeln und geheimnisvollen Fluren. Die Wände? Das sind die Ränder des Elements. Die Möbel? Das ist der Inhalt. Und die Flure? Sie sind die Abstände, die das Ganze zusammenhalten.
Die meisten HTML-Elemente sind wie überambitionierte Gastgeber, die sich mit ausladenden Gesten über die ganze Breite ausbreiten, aber in der Höhe nur so viel Raum nehmen, wie sie brauchen – die Block-Level-Elemente. Doch dann gibt es die schüchternen Inline-Elemente, die bescheiden ihren Platz im Textfluss einnehmen, ohne viel Aufsehen zu erregen. Gemeinsam formen sie die unsichtbare, aber unverzichtbare Architektur deiner Webseite.
Grundlegendes über Boxen im HTML
Wie Boxen ticken – und warum sie manchmal genau das nicht tun
Inline-Elemente
Die diskreten Zauberlehrlinge
Inline-Elemente sind wie die höflichen Gäste auf einem Ball – sie drängen sich nicht in den Vordergrund, sondern tanzen elegant in einer Zeile mit dem Text. Ohne den Raum zu beanspruchen, sorgen sie für einen fließenden Auftritt und fügen sich perfekt ins Gesamtbild ein.
Liste der Inline-Elemente:
<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em>
<i> <img> <input> <kbd> <label> <map> <object> <output> <q> <samp> <script>
<select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var>
<p>W3Schools <span>die Zauberschule</span> im Web.</p>
Der DOM-Inspektor
Der Browser-Detektiv im Trenchcoat
Der DOM-Inspektor ist wie ein scharfsinniger Detektiv mit einem endlosen Kaffeebecher, der im Verborgenen operiert. Er enthüllt die tiefen Geheimnisse jeder Webseite. HTML-Tags, CSS-Regeln – nichts bleibt ihm verborgen. Mit seinem scharfen Blick und der Fähigkeit, jeden kleinen Fehler aufzudecken, durchforstet er die Codeschichten wie ein Profi. Ein Klick mit der rechten Maustaste auf „Untersuchen“ in Chrome oder Firefox, und der Detektiv stürzt sich in die Untersuchung.