CSS-Eigenschaft: min-width, Kategorien: Ausmaße (Höhen und Breiten) (allgemein), Visual formatting model details (CSS 2.1), Basic Box Model (CSS 3), Flexible Box Layout (CSS 3)
Minimalbreite
Bestimmt die minimale Breite eines Block-Elements.
Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
---|---|---|---|---|
Minimalbreite |
| none |
|
Verwandte Eigenschaften aus der Kategorie: Ausmaße (Höhen und Breiten) (allgemein), Visual formatting model details (CSS 2.1), Basic Box Model (CSS 3), Flexible Box Layout (CSS 3):
- align-content
- align-items
- align-self
- box-sizing
- clear
- display
- flex
- flex-basis
- flex-direction
- flex-flow
- flex-grow
- flex-shrink
- flex-wrap
- float
- height
- justify-content
- line-height
- margin
- margin-bottom
- margin-left
- margin-right
- margin-top
- marquee-direction
- marquee-play-count
- marquee-speed
- marquee-style
- max-height
- max-width
- min-height
- Aktuelle Seite: min-width
- order
- overflow
- overflow-style
- overflow-x
- overflow-y
- padding
- padding-bottom
- padding-left
- padding-right
- padding-top
- rotation
- rotation-point
- vertical-align
- visibility
- width
Folgendes ist beim Einsatz von min-width zu beachten:
- min-width definiert die minimale Breite. Per Default nimmt ein Block-Element 100% der verfügbaren Breite ein, Inline-Elemente nur den Platz, den sie benötigen. Damit min-width greift, muss die Fließeigenschaft des Elements verändert werden.
- Wenn die Fließeigenschaften eines Block-Elements per float verändert werden, greift bei wenig Inhalt min-width. Ist mehr Inhalt da, dehnt sich die Box bis auf 100% auf.
- Gleiches gilt für Inline-Elemente. min-width greift dann, wenn eine Fließeigenschaft per float gesetzt wird.
- Ist die definierte min-width größer als der verfügbare Platz, ragt die Box über die umgebene Box hinaus.
- Eine Angabe in % bestimmt die minimale Breite in Bezug auf das umgebende Block-Element.
- min-width ist in der Praxis eher selten zu finden. Wahrscheinlich dadurch zu begründen, dass der Internet Explorer 6 min-width nicht unterstützt.
Firefox | Chrome | Internet Explorer | Safari | Opera |
|||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
CSS21 |
|
|
|
|
|
Weiterführende Informationen zu min-width:
- W3C Spezifikation:
http://www.w3.org/TR/css3-box/#min-width
- letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
min-height - nächste CSS-Eigenschaft (Acc-Key: ALT + SHIFT + w):
min-zoom
Beispiele
HTML:
<div class="doBig">Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.</div>
CSS:
.doBig {
min-width: 500px;
border: 2px solid green;
}
/* Ist min-width breiter als der verfügbare Platz, wird das umgebene Element überlagert. */
Beispiel Nr. 1 So sieht's aus:
Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.
HTML:
<div class="doDefault">Zwei Worte.</div>
CSS:
div {
border: 1px solid black;
}
div.doDefault {
min-width: 250px;
color: green;
}
/* Per Default nimmt ein Block-Element 100% der Breite ein, auch wenn min-width gesetzt ist und wenig Inhalt vorhanden ist. */
Beispiel Nr. 2 So sieht's aus:
Zwei Worte.
HTML:
<div class="doDefault doFloat">Zwei Worte.</div>
CSS:
div.doFloat {
float: right;
}
/* Erst wenn ein float die Fließeigenschaften der Box verändert, greift min-width. */
Beispiel Nr. 3 So sieht's aus:
Zwei Worte.
HTML:
<div class="vielText doWidth">Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.</div>
<div class="vielText doMinWidth">Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.</div>
CSS:
.vielText {
float: left;
}
.doWidth {
color: blue;
width: 160px;
}
/* width legt die Breite fest. */
.doMinWidth {
color: red;
min-width: 140px;
}
/* Ist viel Text da, dehnt sich die Box aus.
Wird nicht vom IE6 unterstützt, hier floatet die zweite Box hinter der die erste. */
Beispiel Nr. 4 So sieht's aus:
Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.
Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.
HTML:
<span class="doSpan">Zwei Worte.</span>
CSS:
span.doSpan {
min-width: 250px;
border: 1px solid red;
}
/* Inline-Elemente ohne weitere Angaben nehmen keine min-width ein. */
Beispiel Nr. 5 So sieht's aus:
Zwei Worte.HTML:
<span class="doSpan doFloatSpan">Zwei Worte.</span>
CSS:
span.doFloatSpan {
float: left;
}
/* Ein float führt dazu, dass min-width auch bei Inline-Elementen greift.
Der IE6 unterstützt dies ebenfalls nicht. */
Beispiel Nr. 6 So sieht's aus:
Zwei Worte.Fehler melden
Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.
Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!
Vielen Dank!