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 July 2015.
* Some parts of this feature may have varying levels of support.
Die margin-bottom
CSS-Eigenschaft legt den Margin-Bereich am unteren Rand eines Elements fest. Ein positiver Wert vergrößert den Abstand zu benachbarten Elementen, während ein negativer Wert den Abstand verkleinert.
Probieren Sie es aus
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(--myAnchor 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
, als <length>
oder als <percentage>
angegeben. Ihr Wert kann positiv, null oder negativ sein.
Werte
<length>
-
Die Größe des Margins als fester Wert.
- Für ankerpositionierte Elemente löst die Funktion
anchor-size()
den Wert zu einem<length>
relativ zur Breite oder Höhe des zugehörigen Ankerelements auf (siehe Festlegen von Elementabständen basierend auf Ankergrößen).
- Für ankerpositionierte Elemente löst die Funktion
<percentage>
-
Die Größe des Margins 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 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
Festlegen positiver und negativer unterer Margins
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;
}
Definitionen für Container und divs, damit die Auswirkungen der Margins deutlicher sichtbar werden
.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
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
margin-bottom | ||||||||||||
anchor-size() | ||||||||||||
auto |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- In development. Supported in a pre-release version.
- In development. Supported in a pre-release version.
- No support
- No support
- Experimental. Expect behavior to change in the future.
- See implementation notes.
Siehe auch
margin-top
,margin-right
undmargin-left
margin
Kurzschreibweisemargin-block-start
,margin-block-end
,margin-inline-start
undmargin-inline-end
margin-block
undmargin-inline
Kurzschreibweisen- CSS-Boxmodell Modul