CSS width-Eigenschaft

Die CSS width-Eigenschaft legt die Breite eines Elements fest. Die Breite schließt border, padding oder margin nicht ein. Beachten Sie, dass dies für das Standard-content-box-Boxmodell gilt; bei box-sizing: border-box werden Padding und Rand in die Breitenberechnung einbezogen.

Die width-Eigenschaft gilt für alle Elemente außer nicht ersetzten Inline-Elementen, Tabellenzeilen und Zeilengruppen (d. h. <thead>, <tfoot> und <tbody>).

Die Eigenschaft akzeptiert eine CSS-Länge (px, pt, em usw.), einen Prozentsatz oder das Schlüsselwort auto.

Beachten Sie, dass der Prozentwert auf der Breite des Elternelements (dem Containing Block) basiert. Bei absolut positionierten Elementen wird der Prozentwert relativ zur Breite des Padding-Box des Containing Blocks berechnet.

Die width-Eigenschaft kann durch die Eigenschaften min-width und max-width überschrieben werden.

INFO

Negative Längenwerte sind unzulässig.

Anfangswert	auto
Gilt für	Alle Elemente außer nicht ersetzten Inline-Elementen, Tabellenzeilen und Zeilengruppen.
Vererbbar	Nein.
Animierbar	Ja. Die Breite eines Elements ist animierbar.
Version	CSS1
DOM-Syntax	Object.style.width = "300px";

Syntax

Syntax der CSS width-Eigenschaft

css

width: auto | length | percentage | initial | inherit | fit-content | min-content | max-content | stretch;

Beispiel für die width-Eigenschaft in „%“:

Beispiel der CSS width-Eigenschaft mit % Wert

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 50%;
        background-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Width property example</h2>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
  </body>
</html>

Try it Yourself »

Ergebnis

CSS width Property

Im gegebenen Beispiel beträgt die Breite des div-Containers 50 %.

Im folgenden Beispiel beträgt die Breite des ersten Elements 250px und die des zweiten Elements 25em:

Beispiel für die width-Eigenschaft in „px“ und „em“:

Beispiel der CSS width-Eigenschaft mit px- und em-Werten

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.t1 {
        width: 250px;
        border: 1px solid black;
        background-color: #1c87c9;
      }
      div.t2 {
        width: 25em;
        border: 1px solid black;
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Width property example</h2>
    <h3>width: 250px</h3>
    <div class="t1">
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
    <h3>width: 25em</h3>
    <div class="t2">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>

Try it Yourself »

Werte

Wert	Beschreibung	Ausführen
auto	Der Browser berechnet eine Breite für das angegebene Element. Dies ist der Standardwert.	Ausführen »
length	Definiert die Breite in px, pt, cm usw.	Ausführen »
percentage	Definiert die Breite in Prozent des enthaltenen Elements.	Ausführen »
initial	Legt fest, dass die Eigenschaft ihren Standardwert verwendet.	Ausführen »
inherit	Erbt die Eigenschaft vom Elternelement.
fit-content	Berechnet die Breite basierend auf der intrinsischen Größe des Inhalts.	Ausführen »
min-content	Berechnet die Breite basierend auf der minimalen Inhaltsgröße.	Ausführen »
max-content	Berechnet die Breite basierend auf der maximalen Inhaltsgröße.	Ausführen »
stretch	Streckt das Element, um den Container auszufüllen.	Ausführen »

Praxis

Welche Funktionalität hat die 'width'-Eigenschaft in CSS?

Sie legt die Breite des Inhaltsbereichs eines Elements festSie legt die Höhe des Inhaltsbereichs eines Elements festSie legt die Breite eines Elements festSie hat keinen Einfluss auf das Layout der SeiteSie kann das Layout der Seite beeinflussen

CSS width-Eigenschaft ​

Syntax ​

Beispiel für die width-Eigenschaft in „%“: ​

Ergebnis ​

Beispiel für die width-Eigenschaft in „px“ und „em“: ​

Werte ​