margin-inline-start

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since enero de 2020.

* Some parts of this feature may have varying levels of support.

Experimental: Esta es una tecnología experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

The margin-inline-start define el margen de inicio en línea lógico de un elemento, que se asigna a un margen físico según el modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a la las propiedades margin-top, margin-right, margin-bottom, o margin-left dependiendo de los valores definidos por writing-mode, direction, y text-orientation.

Pruébalo

margin-inline-start: 20px;
writing-mode: horizontal-tb;

margin-inline-start: 20px;
writing-mode: vertical-rl;

margin-inline-start: 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;
}

Sintaxis

css
/* <length> values */
margin-inline-start: 10px; /* An absolute length */
margin-inline-start: 1em; /* relative to the text size */
margin-inline-start: 5%; /* relative to the nearest block container's width */

/* Keyword values */
margin-inline-start: auto;

/* Global values */
margin-inline-start: inherit;

Se relaciona con margin-block-start, margin-block-end, and margin-inline-end, que define las otras márgenes del elemento.

Valor inicialApplies toHeredablePercentagesValor calculado Animation type

same as margin

depends on layout model

if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto

a length

Valores

La propiedad margin-inline-start toma los mismos valores de la propiedad margin-left.

Sintaxis formal

margin-inline-start =
<'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
Esta sintaxis refleja el estándar más reciente según CSS Anchor Positioning Module Level 1, CSS Box Model Module Level 4, CSS Logical Properties and Values Module Level 1, CSS Values and Units Module Level 4. Es posible que no todos los navegadores hayan implementado todas las partes. Consulte Compatibilidad del navegador para obtener información de soporte.

Ejemplo

Contenido HTML

html
<div>
  <p class="exampleText">Example text</p>
</div>

Contenido CSS

css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  margin-inline-start: 20px;
  background-color: #c8c800;
}

Especificaciones

Specification

CSS Logical Properties and Values Module Level 1
# margin-properties

Compatibilidad con navegadores

Enable JavaScript to view this browser compatibility table.

Mira también

margin-inline-end
Las propiedades físicas mapeadas: margin-top, margin-right, margin-bottom, y margin-left
writing-mode, direction, text-orientation

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 20 mar 2026 by MDN contributors.

View this page on GitHub • Report a problem with this content

margin-inline-start

In this article

Help improve MDN