margin-bottom
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
* Some parts of this feature may have varying levels of support.
Die margin-bottom CSS Eigenschaft legt den Randbereich unten an einem Element fest. Ein positiver Wert platziert das Element 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 Auswirkungen 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 values */
margin-bottom: auto;
/* Global values */
margin-bottom: inherit;
margin-bottom: initial;
margin-bottom: revert;
margin-bottom: revert-layer;
margin-bottom: unset;
Die margin-bottom Eigenschaft wird als das Schlüsselwort auto, oder ein <length>, oder ein <percentage> angegeben. Der Wert kann positiv, null oder negativ sein.
Werte
<length>-
Die Größe des Rands als fester Wert.
- Für anker-positionierte Elemente löst die
anchor-size()Funktion einen<length>Wert relativ zur Breite oder Höhe des assoziierten Ankerelements auf (siehe Festlegen des Elementrands basierend auf der Ankergröße).
- Für anker-positionierte Elemente löst die
<percentage>-
Die Größe des Rands als Prozentsatz, relativ zur Inline-Größe (Breite in einer horizontalen Sprache, definiert durch
writing-mode) des umfassenden Blocks. auto-
Der Browser wählt einen geeigneten Wert. 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
Setzen von positiven und negativen unteren Rändern
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, um margin-bottom und height festzulegen
.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 Container und Divs, damit die Wirkung der Ränder klarer sichtbar wird
.container {
background-color: orange;
width: 320px;
border: 1px solid black;
}
div {
width: 320px;
background-color: gold;
}
Ergebnis
Spezifikationen
| Specification |
|---|
| CSS Box Model Module Level 3 # margin-physical |
Browser-Kompatibilität
Loading…
Siehe auch
margin-top,margin-right, undmargin-leftmarginKurzschreibweisemargin-block-start,margin-block-end,margin-inline-start, undmargin-inline-endmargin-blockundmargin-inlineKurzschreibweisen- CSS-Boxmodell Modul