margin-inline-end CSS property
Baseline
Weitgehend verfügbar
*
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.
* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.
Die margin-inline-end CSS Eigenschaft definiert den logischen inline Endabstand eines Elements, der je nach Schreibweise, Richtung und Textausrichtung des Elements einem physischen Rand zugeordnet wird. Mit anderen Worten, sie entspricht der Eigenschaft margin-top, margin-right, margin-bottom oder margin-left je nach den definierten Werten für writing-mode, direction, und text-orientation.
Probieren Sie es aus
margin-inline-end: 20px;
writing-mode: horizontal-tb;
margin-inline-end: 20px;
writing-mode: vertical-rl;
margin-inline-end: 20%;
writing-mode: horizontal-tb;
direction: rtl;
<section id="default-example">
<div id="container">
<div class="col">One</div>
<div class="col transition-all" id="example-element">Two</div>
<div class="col">Three</div>
</div>
</section>
#container {
width: 300px;
height: 200px;
display: flex;
align-content: flex-start;
justify-content: flex-start;
}
.col {
width: 33.33%;
border: solid #ce7777 10px;
background-color: #2b3a55;
color: white;
flex-shrink: 0;
}
#example-element {
border: solid 10px #ffbf00;
background-color: #2b3a55;
unicode-bidi: bidi-override;
}
Syntax
/* <length> values */
margin-inline-end: 10px; /* An absolute length */
margin-inline-end: 1em; /* relative to the text size */
margin-inline-end: 5%; /* relative to the nearest block container's width */
margin-inline-end: anchor-size(height);
margin-inline-end: calc(anchor-size(--my-anchor self-inline, 25px) / 5);
/* Keyword values */
margin-inline-end: auto;
/* Global values */
margin-inline-end: inherit;
margin-inline-end: initial;
margin-inline-end: revert;
margin-inline-end: revert-layer;
margin-inline-end: unset;
Es bezieht sich auf margin-block-start, margin-block-end, und margin-inline-start, welche die anderen Ränder des Elements definieren.
Werte
Die margin-inline-end Eigenschaft nimmt die gleichen Werte an wie die margin-top Eigenschaft.
Formale Definition
| Anfangswert | 0 |
|---|---|
| Anwendbar auf | wie bei margin |
| Vererbt | Nein |
| Prozentwerte | hängt vom Layoutmodell ab |
| Berechneter Wert | falls als Länge angegeben, die zugehörige absolute Länge; falls als Prozentwert angegeben, der angegebene Wert; ansonsten auto |
| Animationstyp | Längenangabe |
Formale Syntax
margin-inline-end =
<'margin-top'>
<margin-top> =
<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 inline Endabstands
HTML
<div>
<p class="exampleText">Example text</p>
</div>
CSS
div {
background-color: yellow;
width: 120px;
height: 120px;
}
.exampleText {
writing-mode: vertical-lr;
margin-inline-end: 20px;
background-color: #c8c800;
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| CSS Logical Properties and Values Module Level 1 # margin-properties |
Browser-Kompatibilität
Siehe auch
- CSS Logische Eigenschaften und Werte
margin-inline-start- Die zugeordneten physischen Eigenschaften:
margin-top,margin-right,margin-bottom, undmargin-left writing-mode,direction,text-orientation