CSS/Eigenschaften/Größenangaben/min-width

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Eigenschaft min-width legt die Mindestbreite eines Elements fest. Die Eigenschaft unterscheidet sich nicht im Gebrauch von min-height, sie wirkt sich nur statt der Höhe auf die Breite aus.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • CSS 2.0
Beispiel ansehen …
div > div {
  display: inline-block;
  vertical-align: top;
  height: 10em;
  width: auto;
  background-color: khaki;
  margin: 1em .5em;
}
p:first-child {
  text-align: center;
}
code {
  display: block;
}
.max_10 {
  max-width: 10em;
}
.min_20 {
 min-width: 20em;
}
.min_40 {
  min-width: 40em;
}
.width_10 {
  width: 10em;
}
.width_20 {
  width: 20em;
}
.width_30 {
  width: 30em;
}
.width_50p {
  width: 50%;
}
<div>
  <div class="width_20">
    <p><code>min-width: 0;</code><code>width: 20em;</code></p>
    <p>Diese beiden Elemente</p>
  </div>
  <div class="width_20">
    <p><code>min-width: 0;</code><code>width: 20em;</code></p>
    <p>haben eine festgelegte Breite von 20em. Ein breiterer
      Inhalt sorgt nicht für eine Verbreiterung des Elements.
    </p>
  </div>
</div>
<div>
  <div class="min_20">
    <p><code>min-width: 20em;</code><code>width: auto;</code></p>
    <p>Für diese beiden Elemente</p>
  </div>
  <div class="min_20">
    <p><code>min-width: 20em;</code><code>width: auto;</code></p>
    <p>gilt eine minimale Breite von 20em. Bei Bedarf wird
      die Box breiter.
    </p>
  </div>
</div>
<!-- … -->

Erlaubt sind folgende Werte:

  • eine nicht-negative Längenangabe
  • eine Prozentangabe, diese bezieht sich auf die Breite des umschließenden Blocks
  • inherit, es gilt die minimale Breite des Elternelements
Beachten Sie: Im Gegensatz zu max-width bzw. max-height ist die Angabe none nicht erlaubt. Wenn Sie explizit bestimmen müssen, dass für ein Element keine Mindestbreite gilt, definieren Sie min-width: 0.
Beachten Sie: min-width überschreibt alle Angaben für max-width und width.
Beispiel: Gegenüberstellung von min-width und max-width ansehen …
div {
  height: 10em;
  width: 50%;
  background-color: khaki;
  margin: 1em auto;
}
p:first-child {
  text-align: center;
}
code {
  display: block;
}
.min_40 {
  min-width: 40em;
}
.max_40 {
  max-width: 40em;
}
#vergleich {
  width: 40em;
  height: 2em;
  line-height: 2em;
}
<h1>min-width und max-width im Vergleich</h1>
<div class="min_40">
  <p><code>min-width: 40em;</code><code>width: 50%;</code></p>
  <p>Dieser Absatz soll halb so breit wie sein Elternelement sein, jedoch nicht schmaler als 40em werden.
      Probieren Sie es aus, indem Sie die Breite des Browserfensters verändern.</p>
</div>
<div id="vergleich">
  <p>Zum Vergleich: Diese Box ist 40em breit.</p>
</div>
<div class="max_40">
  <p><code>width: 50%;</code><code>max-width: 40em;</code></p>
  <p>Dieser Absatz soll halb so breit wie sein Elternelement sein, jedoch nicht
    breiter als 40em werden. Probieren Sie es aus, indem Sie die Breite des
    Browserfensters verändern.
  </p>
</div>

[Bearbeiten] siehe auch

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML