CSS/Eigenschaften/Größenangaben/width

Aus SELFHTML-Wiki
< CSS‎ | Eigenschaften‎ | Größenangaben(Weitergeleitet von Width)
Wechseln zu: Navigation, Suche

Sie können für bestimmte Elemente die Breite ihrer Inhaltsbereiche festlegen. Die Eigenschaft width wirkt dabei nur auf Elemente, die auf Blockebene erzeugt wurden. Für Inhalt, der größer als die mit width definierten Breite ist, können Sie entweder mit min-width die Breite automatisch anpassen lassen. Die Eigenschaft overflow regelt das Verhalten für den Fall, dass die zur Verfügung stehende Breite für den Inhalt des Elements nicht ausreichend ist.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • CSS 1.0
Beispiel
div#foo { width: 2em; }

Die Eigenschaft width legt die Breite bestimmter Elemente fest. Erlaubt sind folgende Werte:

  • eine nicht-negative Breitenangabe
  • eine Prozentangabe, diese bezieht sich auf die Breite des umschließenden Blocks
  • auto, weist den Browser an, die Breite so zu ermitteln, als ob keine Angabe zu width erfolgt wäre, Ausgangswert
  • inherit, Breitenangabe des Elternelements

Magic Numbers[Bearbeiten]

Mit festen Zahlenwerten (auch engl. „Magic Numbers“ genannt) erreichen Sie unter bestimmten Umständen das Gewünschte, aber in anderen Kontexten wie geänderten Viewport- oder Schriftgrößen wird das Layout zerstört. Meistens wurden sie von Entwicklern verwendet, die nur in ihrem eigenen Browser unter Idealbedingungen getestet wurden.

Empfehlung: Verwenden Sie
  • keine festen Werte für die Breite
  • keine festen Werte für die Höhe eine Elements, sondern lassen dem Inhalt (auch bei geänderter Schriftgröße) den nötigen Platz. Regeln Sie Abstände über padding.
  • relative relative Längenmaße wie em, die sich an geänderte Schriftgrößen anpassen.

siehe auch[Bearbeiten]