Sizing

Ziele

• Ich verstehe den Unterschied zwischen Block- und Inline-Elementen und kann diese in HTML erkennen.
• Ich kann sowohl relative als auch absolute Einheiten in CSS verwenden, um die Größe von Elementen zu bestimmen.
• Ich kann Abstände zwischen und innerhalb von Elementen mithilfe von Margin und Padding in CSS gezielt einstellen.

Block- und Inline-Elemente

Bevor wir Elemente dimensionieren, müssen wir wissen, welche Elemente wir überhaupt dimensionieren können.

In CSS gibt es zwei grundlegende “Display”-Elemente:

• Block-Elemente
• Inline-Elemente

Im Normalfall können wir nur Block-Elemente dimensionieren (eine Grösse geben). Was ist aber nun der Unterschied zwischen den beiden?

Block-Elemente

Block-Elemente starten im Normalfall immer auf einer neuen Zeile und haben per Default um sich selbst herum einen Abstand zu anderen Elementen.

Block-Elemente beanspruchen per Default die volle Breite an Platz (von links bis rechts).

Typische Block-Elemente sind

• <p>
• <div>
• <address>
• <article>
• <aside>
• <blockquote>
• <canvas>
• <div>
• <footer>
• <form>
• <h1>-<h6>
• <header>
• <hr>
• <main>
• <nav>
• <noscript>
• <ol>, <ul>, <dd>, <dl>, <dt>, <li>
• <pre>
• <section>
• <table>

Um das zu verstehen, probiere bitte diesen Code aus:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<p>Nur ein Paragraph</p>
<p>Ein Paragraph mit einem <span>Span</span>.</p>
<style>
    p {
        background-color: red;
    }
    span {
        background-color: yellow;
    }
</style>

Dieser Code zeigt gut, dass das Block-Element (hier <p>) die ganze Breite (abzüglich eines kleinen Randes) eingenommen hat, während das <span> sich auf das Wort beschränkt.

Inline-Elemente

Im obigen Beispiel hast du bereits ein Inline-Element kennengelernt: <span>.

Inline-Elemente kommen meistens in einem Text vor. Inline-Elemente benötigen nur so viel Platz wie nötig. Als grossen Unterschied zu Block-Elementen, beginnen Inline-Elemente nicht auf einer neuen Zeile.

Typische Inline-Elemente sind:

• <a>
• <b>
• <br>
• <button>
• <code>
• <dfn>
• <em>
• <i>
• <img>
• <input>
• <label>
• <script>
• <select>
• <small>
• <span>
• <strong>
• <textarea>
• <time>

Und wichtig zu wissen ist, dass sich keine Block-Elemente in einem Inline-Element befinden dürfen.

Block-Elemente dimensionieren

Bei Block-Elementen kannst du die Grösse verändern:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

<div class="box">
    <p>Inside the first Box</p>
</div>

<div class="box">
    <p>Inside the second Box</p>
</div>

<style>
    div.box {
        /*display: block;*/
        width: 10em;
        height: 10em;
        background-color: cornflowerblue;
    }
</style>

Wenn du diesen Code ausprobierst, siehst du zwei hellblaue Quadrate untereinander. Mit dem width-Property definiert man die Breite und mit dem height die Höhe. Hiermit haben wir dem <div class="box"> eine Höhe und Breite von 10em gegeben.

Einheiten (Units)

Im vorherigen Beispiel haben wir dem Quadrat eine Seitenlänge von 10em gegeben. Was sind aber em?

1em entspricht der Schriftgrösse des aktuellen Elements. Gibt man einem Text zum Beispiel font-size: 2em, so definiert man, dass die Schriftgrösse doppelt so gross sein soll wie beim übergeordneten Element. Somit ist die Grösseneinheit em proportional zur aktuellen Schriftgrösse.

Statt em kann man auch rem verwenden: rem ist im Prinzip das Gleiche wie em, nur dass es relativ zur Schriftgrösse des root-Elements ist (statt dem aktuellen Element). Somit ist rem auf der ganzen Seite immer gleich gross, em nicht.

Für Seiten im Browser verwendet man besser relative Einheiten wie em oder rem. Aber dennoch kommt man oft nicht an der absoluten Einheit px vorbei:

Oft möchte man z.B. den dünnsten möglichen Rand um ein Element von einem Pixel haben. In diesem Fall würde man die Breite des Randes (Borders) gleich 1px setzen. Die Regel könnte so aussehen:

1
2
3
4

div.box {
  ...
  border: 1px solid black;
}

Dieses Beispiel fügt einen schwarzen Rand von 1px Breite hinzu. Das solid bedeutet, dass es eine normale Linie sein soll (also nicht gestrichtelt o.ä.).

Einheiten in der Übersicht

Grundsätzlich empfehle ich dir diese Übersicht: https://www.w3schools.com/cssref/css_units.asp

Unter den absoluten Einheiten musst du nur folgende kennen:

• px

Die absoluten Einheiten sollten immer gleich gross sein. Sie sind aber nicht speziell für im Browser geeignet, weil sich die Bildschirmgrössen der Enduser stark unterscheiden.

Von den relativen Einheiten solltest du mehrere kennen:

Wenn du noch mehr über Einheiten erfahren möchtest, dann schaue dir bitte diese Seite an: https://web.dev/learn/css/sizing/

Block-Elemente weiter dimensionieren (Box Model)

Wir haben bereits CSS-Properties wie width, height, border verwendet. Nun wird es Zeit zu verstehen, wie diese Werte die Dimensionen von Block-Elementen beeinflussen. Probiere dieses Beispiel aus:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

 <div class="box">
    <p>Inside the first Box</p>
</div>

<div class="box">
    <p>Inside the second Box</p>
    <p class="half-width">Halbe Breite</p>
</div>

<style>
    div.box {
        /*display: block;*/
        width: 10em;
        height: 10em;
        background-color: cornflowerblue;
    }
    .half-width {
        width: 50%;
        background-color: white;
        border: 2em solid gray;
    }
</style>

Du wirst sehen, dass das weisse Feld mit “Halbe Breite” die halbe Breite der übergeordneten Box beansprucht. Zusammen mit dem Rand macht das aber mehr als die Hälfte aus! Somit schauen wir uns das Box-Modell in CSS an:

Die “Content Box” ist so zu sagen der Inhalt des Block-Elements. Die “Border Box” ist der Rahmen des Elements. Als wir die width gesetzt hatten, haben wir die Breite des Content Box gesetzt. Oft wollen wir aber, dass die Box inkl. Rand 50% der Breite einnimmt. Hierfür gibt es mehrere Möglichkeiten:

Theoretisch könnten wir die Weite mit einer Berechnung herbeibasteln, indem wir einfach den Rand von der Breite wegsubtrahieren:

1
2
3
4

.half-width {
    width: calc(50% - 2 * 2em);
    ...
}

Dies sieht in den meisten Fällen unnötig kompliziert aus. Und dafür gibt es eine Abkürzung:

1
2
3
4
5

.half-width {
    box-sizing: border-box;
    width: 50%;
    ...
}

Auf diese Weise nimmt die Box nur noch 50% der Breite insgesamt ein (inkl. Border). Der Default für box-sizing ist content-box.

Zur Vertiefung des Box Models kannst du gerne diese Seite studieren: https://web.dev/learn/css/box-model/.

Abstände

Abstände zu anderen Elementen (Margin)

Ziemlich oft möchtest du, dass Elemente untereinander einen Abstand haben. Genau dafür gibt es margin. Spiele mit diesem Wert ein bisschen herum:

1
2
3
4

div.box {
    ...
    margin: 2em;
}

Du kannst die Abstände auch in jede Richtung einstellen:

1

margin: 1em 2em 3em 4px;

was äquivalent zu dem ist:

1
2
3
4

margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 4px;

Beachte bei der kurzen Schreibweise, dass es oben beginnt und im Uhrzeigersinn weitergeht, bzw. merke dir “TRouBLe” (Top Right Bottom Left).

Abstand vom Border zum Content (Padding)

Oft sieht es hässlich aus, wenn der Text direkt am Rand (am Border) ankommt. Das kann behoben werden, indem ein innerer Rand (Padding) eingefügt wird:

1
2
3
4
5
6
7
8

.half-width {
  padding: 0.5em;
  ...
  box-sizing: border-box;
  width: 73%;
  background-color: white;
  border: 7px solid gray;
}

Beachte, dass bei einer Angabe wie width: 40% mit box-sizing: content-box die Weite sich nur auf den Content bezieht. Das Padding kommt in diesem Beispiel zu den 40% noch hinzu!