CSS width / height • Breite und Höhe

CSS width CSS height

HTML sieht alle Inhalte innerhalb des body-Tags als rechteckige Blöcke, die den Raum für ihre vollständige Darstellung einnehmen wollen

CSS width oder height begrenzen zwar den Raum, aber übergroße Inhalte fließen dabei über und drängen alles Folgende sozusagen runter.

18-12-15 SITEMAP

width und height: Breite und Höhe beschränken

Die CSS-Eigenschaften width und height setzen die Breite und Höhe eines HTML-Elements fest, sind aber mit Vorsicht anzuwenden:

Bild ist breiter als der Container

Die Hintergrundfarbe zeigt, dass die Box Breite und Höhe einhält. Aber übergroße Inhalte ohne weitere Formatierung fließen über – und zwar sowohl nach rechts als auch nach unten.

  • Die Breite eines Elements wird durch die CSS-Eigenschaft width begrenzt.
    Aber ein überbreites Element wie ein Bild muss zusätzlich (z.B. durch max-width: 100%) eingeschränkt werden.
  • Die Höhe eines HTML-Blocks mit CSS height ist hingegen nur ein Anfangswert!
    Wenn der Inhalt für das umfassende Element zu groß ist, fließt er weiter, auch wenn die Höhe der Box als CSS-Eigenschaft height angegeben ist. Das Überfließen kann nur durch CSS overflow verhindert werden, wobei übergroße Inhalte nicht mehr angezeigt werden.
  • Während padding zur Breite eines Elements gezählt wird, zählen die modernen Browser padding, border und margin nicht zur Höhe eines Elements hinzu.
    Erst CSS box-sizing macht die Kombination von width, height, padding und border intuitiver.

Inhalt fließt über

Übergroßer Inhalt überlagert die auf die Box folgenden Inhalte oder drängt die folgenden Inhalte weiter nach unten im Dokument.

<div style="width: 350px; height: 260px; background: lavender;">
   <img src="…" width="400" height="175" alt="0001280.gif" />
   <p> …  </p>
</div>

img width und height anpassen

CSS hält sich nur dann an width und height, wenn die Inhalte vollständig in das Element passen oder kleiner als der vorgesehene Raum sind.

Für das responsive Webdesign passt CSS heute die Größe von Bildern an den umfassenden Block an:

img { width: 100%; height: auto }

CSS width / CSS height

Erblich: nein

width, height
Breite / Höhe eines Elements. Wenn die Höhe eines Bildes auf einen Wert gesetzt ist und die Breite als auto angegeben wird, wird das Bild proportional skaliert (das Seitenverhältnis bleibt erhalten).
Werte
<length> | <%> | auto | inherit
<length>
kann in einer der folgenden Maßeinheiten angegeben werden: cm (Zentimeter), em (ems), ex (x-Höhe), in (Inch), mm (Millimeter), pc (Pica), pt (Punkt), px (Pixel).
<percentage> (Prozentsatz)
basiert auf der Höhe des umfassenden Blocks, die als 100% definiert ist. Wenn die Höhe des umfassenden Blocks nicht expliziet notiert ist und der umfassende Block nicht absolut positioniert ist, wird der Wert wie "auto" interpretiert. Eine Prozentangabe für das Wurzelelement wird relativ zum Viewport interpretiert.
auto
ist die Voreinstellung und weist den Browser an, die Höhe automatisch zu berechnen. Wenn sowohl Höhe als auch Breite auf auto gesetzt werden, bleiben die Dimensionen des Text- oder Bildelements unverändert. Durch die Angabe von auto wird auch sichergestellt, dass keine vorangegangenen Deklarationen die Höhe des Elements beeinflussen.

width / height in px, % oder em?

Die meistgenutzten Angaben für die Breite / Höhe von Elementen sind px, em und %.

Pixel px
sind eine absolute Angabe. Wenn ein Block mit 200px Breite angegeben ist, dann ist er 200px breit, egal ob er auf einem Monitor mit 320px Breite oder mit einer Auflösung von 1980 x 1200 gerendert wird.
<div style="width: 200px;">
    <div style="width: 50%;"></div>
</div>
Prozent %
ist eine relative Angabe und beziehen sich auf die Breite bzw. Höhe des umfassenden Blocks.
.myDiv {
    width: 100vw;
    height: 100vh;
    background-color: red;
}
füllt das Browserfenster vollständig.
Viewport width / height
Angabe relativ zur Größe des Viewports bzw. Browserfensters.
em / rem
em ist eine Maßangabe relativ zur Schriftgröße des umfassenden Blocks. rem ist relativ zur Schriftgröße des html-Elements (16px)