margin-right
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-right
CSS-Eigenschaft setzt den Abstandbereich auf der rechten Seite 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-right: 1em;
margin-right: 10%;
margin-right: 10px;
margin-right: 0;
<section id="default-example">
<div id="container">
<div class="col"></div>
<div class="col transition-all" id="example-element"></div>
<div class="col"></div>
</div>
</section>
#container {
width: 300px;
height: 200px;
display: flex;
align-content: flex-start;
justify-content: flex-start;
}
.col {
width: 33.33%;
border: solid #5b6dcd 10px;
background-color: rgb(229 232 252 / 0.6);
flex-shrink: 0;
}
#example-element {
border: solid 10px #ffc129;
background-color: rgb(255 244 219 / 0.6);
}
Die vertikalen Abstände von zwei benachbarten Boxen können verschmelzen. Dies wird margin collapsing genannt.
Syntax
/* <length> values */
margin-right: 20px; /* An absolute length */
margin-right: 1em; /* relative to the text size */
margin-right: 5%; /* relative to the nearest block container's width */
margin-right: anchor-size(self-block);
margin-right: calc(anchor-size(--myAnchor height, 20px) / 4);
/* Keyword values */
margin-right: auto;
/* Global values */
margin-right: inherit;
margin-right: initial;
margin-right: revert;
margin-right: revert-layer;
margin-right: unset;
Die margin-right
-Eigenschaft wird als Schlüsselwort auto
, oder als <length>
, oder als <percentage>
angegeben. Der Wert kann positiv, null oder negativ sein.
Werte
<length>
-
Die Größe des Abstands als fester Wert.
- Für anchor-positionierte Elemente löst die
anchor-size()
Funktion sich relativ zur Breite oder Höhe des zugehörigen Anker-Elements in einen<length>
-Wert auf (siehe Festlegen des Elementabstandes basierend auf Ankergröße).
- Für anchor-positionierte Elemente löst die
<percentage>
-
Die Größe des Abstands als Prozentsatz, relativ zur Inline-Größe (Breite in einer horizontalen Sprache, definiert durch
writing-mode
) des umschließenden Blocks. auto
-
Der rechte Abstand erhält einen Anteil des ungenutzten horizontalen Raums, der hauptsächlich durch den verwendeten Layoutmodus bestimmt wird. Wenn die Werte von
margin-left
undmargin-right
beide aufauto
gesetzt sind, wird der berechnete Raum gleichmäßig verteilt. Diese Tabelle fasst die verschiedenen Fälle zusammen:Wert von display
Wert von float
Wert von position
Berechneter Wert von auto
Kommentar inline
,inline-block
,inline-table
beliebig static
oderrelative
0
Inline-Layoutmodus block
,inline
,inline-block
,block
,table
,inline-table
,list-item
,table-caption
beliebig static
oderrelative
0
, außer wenn sowohlmargin-left
als auchmargin-right
aufauto
gesetzt sind. In diesem Fall wird es auf den Wert eingestellt, der das Element innerhalb seines Elternteils zentriert.Block-Layoutmodus block
,inline
,inline-block
,block
,table
,inline-table
,list-item
,table-caption
left
oderright
static
oderrelative
0
Block-Layoutmodus (schwebendes Element) beliebig table-*
, außertable-caption
beliebig beliebig 0
Interne table-*
Elemente haben keine Abstände, verwenden Sie stattdessenborder-spacing
beliebig, außer flex
,inline-flex
, odertable-*
beliebig fixed
oderabsolute
0
, außer wenn sowohlmargin-left
als auchmargin-right
aufauto
gesetzt sind. In diesem Fall wird es auf den Wert eingestellt, der den Randbereich innerhalb der verfügbarenBreite
zentriert, wenn fixiert.Absolut positionierter Layoutmodus flex
,inline-flex
beliebig beliebig 0
, außer wenn positiver horizontaler Freiraum vorhanden ist. In diesem Fall wird er gleichmäßig auf alle horizontalenauto
Abstände verteilt.Flexbox-Layoutmodus
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-right =
<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 des rechten Abstands mit Pixeln und Prozentsätzen
.content {
margin-right: 5%;
}
.side-box {
margin-right: 10px;
}
.logo {
margin-right: -5px;
}
Spezifikationen
Specification |
---|
CSS Box Model Module Level 3 # margin-physical |
Browser-Kompatibilität
Siehe auch
margin-top
,margin-bottom
, undmargin-left
margin
Kurzformmargin-block-start
,margin-block-end
,margin-inline-start
, undmargin-inline-end
margin-block
undmargin-inline
Kurzformen- CSS box model Modul