margin-bottom CSS property
Baseline
Weitgehend verfügbar
*
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.
Die CSS-Eigenschaft margin-bottom legt den Außenabstandsbereich am unteren Rand eines Elements fest. Ein positiver Wert platziert es weiter von seinen Nachbarn entfernt, während ein negativer Wert es näher platziert.
Probieren Sie es aus
margin-bottom: 1em;
margin-bottom: 10%;
margin-bottom: 10px;
margin-bottom: 0;
<section id="default-example">
<div id="container">
<div class="row"></div>
<div class="row transition-all" id="example-element"></div>
<div class="row"></div>
</div>
</section>
#container {
width: 300px;
height: 200px;
display: flex;
align-content: flex-start;
flex-direction: column;
justify-content: flex-start;
}
.row {
height: 33.33%;
display: inline-block;
border: solid #ce7777 10px;
background-color: #2b3a55;
flex-shrink: 0;
}
#example-element {
border: solid 10px #ffbf00;
background-color: #2b3a55;
}
Diese Eigenschaft hat keine Auswirkung auf nicht-ersetzte Inline-Elemente, wie <span> oder <code>.
Syntax
/* <length> values */
margin-bottom: 10px; /* An absolute length */
margin-bottom: 1em; /* relative to the text size */
margin-bottom: 5%; /* relative to the nearest block container's width */
margin-bottom: anchor-size(width);
margin-bottom: calc(anchor-size(--my-anchor self-block, 20px) / 3);
/* Keyword value */
margin-bottom: auto;
/* Global values */
margin-bottom: inherit;
margin-bottom: initial;
margin-bottom: revert;
margin-bottom: revert-layer;
margin-bottom: unset;
Die Eigenschaft margin-bottom wird als Schlüsselwort auto, als <length> oder als <percentage> angegeben. Ihr Wert kann positiv, null oder negativ sein.
Werte
<length>-
Die Größe des Außenabstands als fester Wert.
- Bei ankerpositionierten Elementen wird die Funktion
anchor-size()zu einem<length>-Wert relativ zur Breite oder Höhe des zugehörigen Ankerelements aufgelöst (siehe Festlegen des Element-Außenabstands basierend auf der Ankergröße).
- Bei ankerpositionierten Elementen wird die Funktion
<percentage>-
Die Größe des Außenabstands als Prozentsatz relativ zur Inline-Größe (Breite in einer horizontalen Sprache, definiert durch
writing-mode) des enthaltenden Blocks. auto-
Der Browser wählt einen geeigneten zu verwendenden Wert aus. Siehe
margin.
Formale Definition
| Anfangswert | 0 |
|---|---|
| Anwendbar auf | alle Elemente außer Elemente mit Tabellen-display-Typen, die nicht table-caption, table und inline-table entsprechen. Auch anwendbar auf ::first-letter. |
| Vererbt | Nein |
| Prozentwerte | bezieht sich auf die Breite des äußeren Elements |
| Berechneter Wert | der Prozentwert wie angegeben oder die absolute Länge |
| Animationstyp | Längenangabe |
Formale Syntax
margin-bottom =
<length-percentage> |
auto |
<anchor-size()>
<length-percentage> =
<length> |
<percentage>
<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )
<anchor-name> =
<dashed-ident>
<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline
Beispiele
Positive und negative untere Außenabstände festlegen
HTML
<div class="container">
<div class="box0">Box 0</div>
<div class="box1">Box 1</div>
<div class="box2">Box one's negative margin pulls me up</div>
</div>
CSS
CSS für divs zum Festlegen von margin-bottom und Höhe
.box0 {
margin-bottom: 1em;
height: 3em;
}
.box1 {
margin-bottom: -1.5em;
height: 4em;
}
.box2 {
border: 1px dashed black;
border-width: 1px 0;
margin-bottom: 2em;
}
Einige Definitionen für den Container und divs, damit die Auswirkungen der Außenabstände deutlicher sichtbar werden
.container {
background-color: orange;
width: 320px;
border: 1px solid black;
}
div {
width: 320px;
background-color: gold;
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| CSS Box Model Module Level 3 # margin-physical |
Browser-Kompatibilität
Siehe auch
margin-top,margin-rightundmargin-left- Kurzschreibweise
margin margin-block-start,margin-block-end,margin-inline-startundmargin-inline-end- Kurzschreibweisen
margin-blockundmargin-inline - Modul CSS-Boxmodell