Block- vs. Inline-Elemente

Teil des Abschnitts Styling with CSS der HTML-Journey von Coddy — Lektion 54 von 76.

In HTML werden Elemente basierend auf ihrer Darstellung auf der Seite entweder als Block-Elemente (block-level) oder Inline-Elemente kategorisiert. Das Verständnis des Unterschieds zwischen diesen beiden Arten von Elementen ist entscheidend für die Erstellung gut strukturierter und optisch ansprechender Layouts. Lassen Sie uns die Merkmale und Verhaltensweisen von Block- und Inline-Elementen untersuchen.

Block-Elemente

Ein Block-Element beginnt immer in einer neuen Zeile und nimmt die gesamte verfügbare Breite ein, wobei es sich so weit wie möglich nach links und rechts ausdehnt. Es erzeugt einen „Block“ an Inhalt.

Beispiele für Block-Level-Elemente sind:

<div>
<h1> - <h6>
<p>
<ul>, <ol>, <li>
<form>
<table>
<header>, <footer>, <section>, <article>, <nav>

Inline-Elemente

Ein Inline-Element beginnt nicht in einer neuen Zeile und nimmt nur so viel Breite ein, wie notwendig ist, um seinen Inhalt aufzunehmen. Es ermöglicht Inline-Elementen, innerhalb einer Textzeile oder innerhalb eines Block-Level-Elements zu fließen.

Beispiele für Inline-Elemente sind:

<span>
<a>
<img>
<strong>, <em>
<input>, <button>, <label>
<textarea>

Aufgabe

Einfach

Sie erhalten ein HTML-Dokument mit verschiedenen Elementen. Ihre Aufgabe ist es, zu identifizieren, welche Elemente Block-Elemente und welche Inline-Elemente sind, und dann einfaches CSS anzuwenden, um die Unterschiede hervorzuheben. Folgen Sie den unten stehenden Schritten:

Schreiben Sie eine CSS-Regel, die alle Block-Elemente (div, p, h1) anspricht. Setzen Sie deren background-color auf lightgray und fügen Sie einen border von 1px solid blue hinzu.
Schreiben Sie eine CSS-Regel, die alle Inline-Elemente (span, a, img) anspricht. Setzen Sie deren background-color auf lightyellow und fügen Sie einen border von 1px solid red hinzu.

Beobachten Sie, wie die Block-Elemente die gesamte verfügbare Breite einnehmen und in neuen Zeilen beginnen, während die Inline-Elemente nur so viel Platz wie nötig beanspruchen und innerhalb der Zeile fließen.

Spickzettel

HTML-Elemente werden basierend auf ihrem Anzeige-Verhalten entweder als Block-Elemente oder als Inline-Elemente kategorisiert.

Block-Elemente

Block-Elemente beginnen in einer neuen Zeile und nehmen die volle verfügbare Breite ein, wobei sie sich so weit wie möglich nach links und rechts ausdehnen.

Beispiele: <div>, <h1>-<h6>, <p>, <ul>, <ol>, <li>, <form>, <table>, <header>, <footer>, <section>, <article>, <nav>

Inline-Elemente

Inline-Elemente beginnen nicht in einer neuen Zeile und nehmen nur so viel Breite ein, wie für ihren Inhalt erforderlich ist. Sie fließen innerhalb einer Textzeile oder innerhalb von Block-Elementen.

Beispiele: <span>, <a>, <img>, <strong>, <em>, <input>, <button>, <label>, <textarea>

Probier es selbst

<html>
<head>
    <title>Block vs Inline Elements</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div>This is a div element.</div>
    <p>This is a paragraph with a <span>span element</span> inside.</p>
    <h1>This is a heading element.</h1>
    <a href="#">This is a link</a>
    <img src="https://img.freepik.com/free-photo/abstract-luxury-gradient-blue-background-smooth-dark-blue-with-black-vignette-studio-banner_1258-54865.jpg" alt="Image" width="100">
</body>
</html>