CSS min-width-Eigenschaft

Die min-width-Eigenschaft legt die Mindestbreite eines Elements fest. Diese Eigenschaft verhindert, dass der Wert der width-Eigenschaft kleiner wird als der für min-width angegebene Wert.

Beachten Sie, dass min-width in Kombination mit den width- und max-width-Eigenschaften als untere Grenze wirkt. Die berechnete Breite wird zwischen min-width und max-width geklemmt, wobei der width-Wert überschrieben wird, wenn er außerhalb dieses Bereichs liegt.

Die Eigenschaft akzeptiert eine CSS-Längenangabe (px, pt, em usw.) oder einen Prozentsatz.

INFO

Negative Längenangaben sind unzulässig.

Anfangswert	0
Gilt für	Alle Elemente, außer nicht ersetzte Inline-Elemente, Tabellenzeilen und Zeilengruppen.
Vererbbar	Nein.
Animierbar	Ja. Die Breite ist animierbar.
Version	CSS2
DOM-Syntax	object.style.minWidth = "200px";

Syntax

Syntax der CSS min-width-Eigenschaft

css

min-width: <length> | <percentage> | initial | inherit;

Beispiel für die min-width-Eigenschaft:

Beispiel der CSS min-width-Eigenschaft mit px-Wert

html

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title of the document</title>
    <style>
      div {
        width: 10px;
        min-width: 70%;
        background-color: #1c87c9;
        color: #ffffff
      }
    </style>
  </head>
  <body>
    <div>The min-width of this text is defined as 70%.</div>
  </body>
</html>

Try it Yourself »

Ergebnis

CSS min-width Property

Hier beträgt die Mindestbreite des Elements 10 cm:

Beispiel für die min-width-Eigenschaft in "cm" angegeben:

Beispiel der CSS min-width-Eigenschaft mit cm-Wert

html

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title of the document</title>
    <style>
      span {
        background-color: #ccc;
        min-width: 0;
      }
      .example {
        min-width: 10cm;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <h2>Min-width property example</h2>
    <h3>Min-width: 0:</h3>
    <span>Minimum width is set to 0.</span>
    <h3>min-width: 10cm:</h3>
    <span class="example">Minimum width is set to 10cm.</span>
  </body>
</html>

Try it Yourself »

Werte

Wert	Beschreibung	Ausführen
length	Definiert die Mindestbreite in px, pt, cm usw. Standardwert ist 0.	Ausführen »
%	Legt die Mindestbreite in % des Elternelements fest.	Ausführen »
initial	Legt fest, dass die Eigenschaft ihren Standardwert verwendet.	Ausführen »
inherit	Erbt die Eigenschaft von ihrem Elternelement.

Practice

Was ist die Funktionalität der 'min-width'-Eigenschaft in CSS?

Sie ermöglicht die Definition der Mindestbreite eines ElementsSie ermöglicht die Definition der Maximalbreite eines ElementsSie ermöglicht die Definition der Mindesthöhe eines ElementsSie verhindert, dass die Werte der 'width'-Eigenschaft kleiner als angegeben werdenSie hilft beim Drehen eines Elements

CSS min-width-Eigenschaft ​

Syntax ​

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

Ergebnis ​

Beispiel für die min-width-Eigenschaft in "cm" angegeben: ​

Werte ​