Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
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.
Diemargin-bottomCSS Eigenschaft setzt denRandbereich am unteren Rand eines Elements. 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> <div> <div></div> <div></div> <div></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 Wirkung aufnicht-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;Diemargin-bottom Eigenschaft wird als das Schlüsselwortauto, oder als ein<length>, oder ein<percentage> angegeben. Ihr Wert kann positiv, null oder negativ sein.
Werte
<length>Die Größe des Randes als fester Wert.
- Beiankerpositionierten Elementen wird die Funktion
anchor-size()zu einem<length>Wert relativ zur Breite oder Höhe des zugehörigenAnkerelements aufgelöst (sieheElement-Rand basierend auf Ankergröße setzen).
- Beiankerpositionierten Elementen wird die Funktion
<percentage>Die Größe des Randes als Prozentsatz, relativ zur Inline-Größe (Breite in einer horizontalen Sprache, definiert durch
writing-mode) desumfassenden Blocks.autoDer 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 nichttable-caption,table undinline-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> <div>Box 0</div> <div>Box 1</div> <div>Box one's negative margin pulls me up</div></div>CSS
CSS für Divs zum Setzen 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 Container und Divs, damit die Effekte der Ränder deutlicher zu sehen sind
.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
Siehe auch
margin-top,margin-right, undmargin-leftmarginKurzschreibweisemargin-block-start,margin-block-end,margin-inline-start, undmargin-inline-endmargin-blockundmargin-inlineKurzschreibweisen- CSS-Boxmodell Modul