CSS/Eigenschaften/Größenangaben/min-width
Aus SELFHTML-Wiki
< CSS | Eigenschaften | Größenangaben
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.
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 -
unset
, hebt den bisher gesetzten Wert wieder auf (nur sinnvoll in Kombination mit@media
-Regeln)
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.
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>