Breite und Höhe

Regeln

Bemaßungen von HTML Elementen sind etwas schwierig, weil die Eigenschaften width, height von verschiedenen Faktoren abhängen, die man zuerst einmal kennen muss.
Verwandte Themen: Block & Inline Elemente, Boxmodell, Position

Block-Elemente

Block-Elemente haben eine Breite von 100% bezüglich der Breite des Elternelements. Die Höhe wird vom Inhalt bestimmt. Mit CSS Eigenschaften width (Breite) und height (Höhe) kann man Blockelemente bemaßen. Ist der Inhalt dann größer als die Box kann man mittels overflow bestimmen, wie das dargestellt wird.

Inline-Elemente

Inline-Elemente werden sowohl in Breite und Höhe durch den Inhalt bestimmt. Inline Elementen kann man keine Breite und Höhe zuweisen. Padding und Margin wirkt sich nur in der Breite wirklich aus. In der Höhe verschiebt das padding nicht die darüber oder darunter liegenden Elemente. siehe Beispiel Wenn man einem Inline Element eine Breite zuweisen will, muss man dieses in ein Blockelement oder Inline-Blockelement umwandeln display:inline-block

Block-Elemente prozentuale Höhe

Block-Elemente prozentuale Höhe, greift nur dann wenn:
a) das Elternelement eine feste Höhe bekommen hat.
b) das Elternelement nicht position: static ist. Beispiel

Block-Elemente width

Blockelemente width bezieht sich auf:
a) den Inhaltsbereich, wenn box-sizing: content-box ist. Dieser Standardwert muss nicht explizit gesetzt werden.
b) bezieht sich auf den Breich inklusive border und padding bei box-sizing: border-box
siehe Boxmodell

width

height

Minimal und Maximal Werte festlegen

Die folgenden Werte sind vor allen Dingen im Zusammenhang mit responsive Design wichtig.

Gibt man einem Block-Element eine max-width mit absolutem Wert (nicht Prozent, vw, vh) wird es nicht größer als angegeben, aber wenn der Bildschirm oder das Elternelement schmaler ist, entstehen keine horizontalen Scrollleisten, wie es bei der festen Breite mit width der Fall wäre.

Mit der min-Eigenschaft kann man eine minimale Größe definieren. Das ist sinnvoll, wenn der Inhalt kleiner ist, als die Box oder auch in Situationen mit float oder flexbox, wo Elemente in neuen Reihen plaziert werden, wenn nicht genug Raum vorhanden ist.

Im folgendem Beispiel habe ich mehrere Eigenschaften aufgeführt, um eine optimale Darstellung einer Reihe von Vorschaubildern anzuzeigen. siehe Beispiel

aspect-ratio bei iframes, video, canvas

Mittels aspect-ratio kann man ein Seitenverhältnis bei canvas , iframes und video festlegen. Das ist vor allen Dingen dann von Vorteil, wenn man die Breite in Prozent festlegt und man ein bestimmtes Seitenverhältnis braucht. Beispielsweise bei Youtube Videos, Google Maps und anderen Iframes.

Im folgendem Beispiel ist es halb so hoch wie breit.

aspect-ratio: 2/1;

Überlauf

Wenn der Inhalt größer ist als die Box, kann man mit CSS overflow bestimmen, ob Scrolleisten entstehen, der Inhalt über den Rand hinausgeht oder einfach abgeschnitten wird. Siehe Thema-Position / overflow Beispiel so sieht`s aus

Die Seitenhöhe und background-position für Hintergrundbilder

Wenn man mit background-position ein Hintergrundbild vertikal positioneren will, stellt man fest, dass die Unterkante bottom, nicht das Browserfenster ist, sondern der Inhalt der Seite die Höhe und Unterkante bestimmt.

Wenn man jedoch html{min-height: 100%); setzt kann man das Hintergrundbild auf der Unterkante des Fensters positionieren.

In den folgenden beiden Beispielen ist background-position: center bottom; gesetzt. Der erste Wert bezieht sich auf die Horizontale der zweite auf die Vertikale.

Beispiel 1 / Beispiel 2

Die Höhe, um den footer auf die Unterkante zu setzen

Um ein Element mindestens so hoch wie das Browserfenster zu setzen, kann man die Einheit vh nutzen, welches für Viewport Height steht und in Prozent angegeben wird.

Im folgenden Beispiel wird die Seite in 3 untereinanderliegende Bereiche aufgeteilt.

1. header height:150px
2. main errechnen mit calc()
3. footer padding:25px; font-size: 1rem;

Es soll erreicht werden, dass der Footer auch bei geringem Inhalt des main Elements unten am Fensterrand anliegt. Dazu muss die Mindesthöhe des main Elements errechnet werden. Man nehme das alternative Boxmodell box-sizing: border-box, damit die Berechnung einfacher ist.

header bekommt eine feste Höhe von 100 Pixeln.

Der Footer bekommt einen einzeiligen Inhalt mit einer Schriftgröße von 1rem und ein padding von 25px; Da eine Zeilenhöhe 120 Prozent der Schrifthöhe beträgt, sofern man keinen anderen Wert als line-height angibt, entspricht die Gesamthöhe des footers 50 Pixel + 1.2rem. Eine Möglichkeit die Rechnung zu verreinfachen ist, man vergibt im footer eine line-height: 100% dann muss man lediglich die Schriftgröße in rem dazu addieren.

Die Gesamthöhe des Fenster entspricht 100vh. Davon zieht man die Höhe des Headers und des Footers ab.

main {min-height: calc(100vh - 200px - 1.2rem);}

Beispiel

Zentrieren

Blockelemente horizontal mittig setzen

Blockelemente haben eine Breite von 100% sofern man keine andere Breite definiert. Erst wenn ein Blockelement kleiner ist, als das umgebende Elternelement spielt eine Ausrichtung wie links, rechts, mittig eine Rolle.

Mittels margin kann man diese kleineren Blockelemente ausrichten:

Blockelement links ist standard

Blockelement rechts

    margin-left: auto;
    margin-right: 30px;
    

Blockelement mittig

    margin-left: auto;
    margin-right: auto;
    

Inline Elemente horizontal mittig setzen

Inline Elemente sind Elemente, die einzelne Worte oder Textstellen auszeichen, wie, a, abbr, b, strong, i ... Sie liegen nebeneinander es entsteht nicht automatisch eine neue Zeile nach einem Inline- Element oder Inline-Blockelement.

Bilder, viele Formularelemente, Iframes, Audio und Video sind Inline-Block Elemente.

All diese Inline Elemente sind nebeneinander angeordnet, sofern sie nebeneinander passen.
Im Gegensatz zu Blockelementen, die untereinander stehen und eine Standardbreite von 100% haben.

Man zentriert Inline-Elemente, indem man dem umgebenden Blockelement text-align: center zuweist.

Auf keinem Fall weist man dem einzelnen Inline-Element diese Eigenschaft zu: img{text-align: center;}

figure{text-align: center;}
<figure><img src="bild.jpg"></figure>

Hier steht ein mittig ausgerichteter Text.
Der Absatz (p- Element) hat text-align: center
Im nächsten Absatz werden auf gleiche Art mehrere Bilder (Inline-Block-Elemente) zentriert.

Webseite zentrieren

siehe auch Complete Guide to Centering

Mit der folgenden Anweisung weist man einen div Bereich für den gesamten Inhalt eine maximale Breite zu. Mit margin-left:auto und margin-right: auto; wird das div zentriert.

gängige Auflösungen

div#wrapper {
color: #000; 

background-color: #fff; 
max-width: 720px; 
margin: 10px auto;
}

Inhalt vertikal horizontal zentrieren mit flex

html {  	
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}

Inhalt vertikal horizontal zentrieren mit grid

body, html {
height: 100%;
display: grid;
}  
span {
/* thing to center */
margin: auto;  
}