CSS max-width-Eigenschaft

Die max-width-Eigenschaft wird verwendet, um die maximale Breite eines Elements festzulegen.

Diese Eigenschaft verhindert, dass der Wert der width-Eigenschaft größer wird als der für max-width angegebene Wert.

Gleichzeitig überschreibt die max-width-Eigenschaft die width-Eigenschaft, und die CSS-min-width-Eigenschaft überschreibt die max-width-Eigenschaft.

Anfangswert	none
Gilt für	Alle Elemente, jedoch nicht für nicht ersetzte Inline-Elemente, Tabellenzeilen und Zeilengruppen.
Vererbbar	Nein.
Animierbar	Ja. Die Breite ist animierbar.
Version	CSS2
DOM-Syntax	object.style.maxWidth = "500px";

Syntax

Syntax der CSS max-width-Eigenschaft

css

max-width: none | length | initial | inherit;

Beispiel für die max-width-Eigenschaft:

Beispiel für die CSS max-width-Eigenschaft mit %-Wert

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        max-width: 50%;
        background-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Max-width property example</h2>
    <div>The max-width of this text is defined as 50%.</div>
  </body>
</html>

Try it Yourself »

Ergebnis

CSS max-width-Eigenschaft

Beispiel für die max-width-Eigenschaft, definiert als "px" und "em":

Beispiel für die CSS max-width-Eigenschaft mit px- und em-Werten

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        max-width: 250px;
        background-color: #8ebf42;
      }
      p {
        max-width: 20em;
        background-color: #ccc;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <h2>Max-width property example</h2>
    <div>The max-width of this div element is defined as 250px.</div>
    <p>The max-width of this paragraph is defined as 20em.</p>
  </body>
</html>

Try it Yourself »

Werte

Wert	Beschreibung	Testen »
auto	Legt die maximale Breite fest. Dies ist der Standardwert dieser Eigenschaft.	Testen »
length	Definiert die maximale Breite in px, pt, cm usw. Standardwert ist 0.	Testen »
%	Legt die maximale Breite in % des Elternelements fest.	Testen »
initial	Legt fest, dass die Eigenschaft ihren Standardwert verwendet.	Testen »
inherit	Erbt die Eigenschaft von ihrem Elternelement.

Praxis

Was bewirkt die CSS max-width-Eigenschaft?

Sie verhindert, dass der berechnete Wert der width-Eigenschaft größer wird als der von max-width angegebene Wert.Sie erhöht die Breite eines Elements auf den maximalen WertSie legt eine Mindestbreite für ein Element festSie begrenzt die maximale Breite der Kindelemente innerhalb eines übergeordneten Containers.Sie erhöht den Innenabstand (Padding) innerhalb eines Elements.

CSS max-width-Eigenschaft ​

Syntax ​

Beispiel für die max-width-Eigenschaft: ​

Ergebnis ​

Beispiel für die max-width-Eigenschaft, definiert als "px" und "em": ​

Werte ​

Praxis ​

CSS max-width-Eigenschaft

Syntax

Beispiel für die max-width-Eigenschaft:

Ergebnis

Beispiel für die max-width-Eigenschaft, definiert als "px" und "em":

Werte

Praxis