initial commit

5 files changed, 836 insertions, 0 deletions

diff --git a/files/es/web/css/css_logical_properties/basic_concepts/index.html b/files/es/web/css/css_logical_properties/basic_concepts/index.html
new file mode 100644
index 0000000000..a90c3b016f
--- /dev/null
+++ b/files/es/web/css/css_logical_properties/basic_concepts/index.html
@@ -0,0 +1,71 @@
+---
+title: Conceptos básicos de las Propiedades y Valores Lógicos
+slug: Web/CSS/CSS_Logical_Properties/Basic_concepts
+translation_of: Web/CSS/CSS_Logical_Properties/Basic_concepts
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">La Especificación de Propiedades y Valores Lógicos introduce asignaciones relativas al flujo para muchas de las propiedades y valores en CSS. Este artículo introduce la especificación y explica las propiedades y valores relativos al flujo.</p>
+
+<h2 id="¿Por_qué_necesitamos_propiedades_lógicas">¿Por qué necesitamos propiedades lógicas?</h2>
+
+<p>Tradicionalmente CSS ha medido las cosas de acuerdo con las dimensiones físicas de la pantalla. Por lo tanto, decimos que las cajas tienen un ancho<span style="font-size: 1rem; letter-spacing: -0.00278rem;"> ({{CSSxRef("width")}}) y un alto ({{CSSxRef("height")}}), posicionamos elementos</span><span style="font-size: 1rem; letter-spacing: -0.00278rem;">, los flotamos, les asignamos bordes, márgenes y rellenos arriba (</span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">top</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">), a la derecha (</span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">right</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">), abajo (</span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">bottom</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">), a la izquierda ( </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">left</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">), etc. La </span><a href="https://drafts.csswg.org/css-logical/" style="font-size: 1rem; letter-spacing: -0.00278rem;">especificación de Propiedades y valores Logicos</a><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> define una asignación de esos valores físicos a su lógica, o flujo relativo — por ejemplo, comienzo (</span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">start</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">) y final (</span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">end</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">) en oposición a izquierda (</span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">left</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">) y derecha (</span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">right</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">) / arriba (</span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">top</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">) y abajo (</span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">bottom</code>) .</p>
+
+<p>Un ejemplo de por qué esas asignaciones podrían ser necesarias es el siguiente: tengo el diseño de una pantalla usando CSS Grid, el contenedor de la rejilla tiene un ancho y estoy usando las propiedades {{CSSxRef("align-self")}} y {{CSSxRef("justify-self")}} para alinear los elementos dentro del contenedor. Esas propiedades son de flujo relativo — <code>justify-self: start</code> alinea el elemento al inicio de la dimensión en línea, <code>align-self: start</code> hace lo mismo en la dimensión bloque.</p>
+
+<p><img alt="A grid in a horizontal writing mode" src="https://mdn.mozillademos.org/files/16338/grid-horizontal-width-sm.png" style="display: block; margin: 0 auto; width: 350px;"></p>
+
+<p>Si ahora cambio el modo de escritura para este componente a <code>vertical-rl</code> usando la propiedad {{CSSxRef("writing-mode")}}, la alineación sigue trabajando de la misma forma. La dimensión en línea está ahora de forma vertical y la dimensión bloque de forma horizontal. Sin embargo, la rejilla no se ve igual ya que el ancho asignado para el contenedor es una medida horizontal, vinculada a la posición física y no a la posición lógica o al flujo relativo del texto.</p>
+
+<p><img alt="A grid in vertical writing mode." src="https://mdn.mozillademos.org/files/16339/grid-vertical-width-sm.png" style="display: block; margin: 0 auto; width: 350px;"></p>
+
+<p>Si en lugar de usar la propiedad <code>width</code> usamos la propiedad lógica {{CSSxRef("inline-size")}}, el componente funciona de la misma forma sin importar en qué modo de escritura se encuentre.</p>
+
+<p><img alt="A grid layout in vertical writing mode" src="https://mdn.mozillademos.org/files/16337/grid-vertical-inline-size-small.png" style="display: block; height: 382px; margin: 0 auto; width: 200px;"></p>
+
+<p>Puedes probar lo anterior en el siguiente ejemplo en vivo. Cambia la propiedad <code>writing-mode</code> de <code>vertical-rl</code> a <code>horizontal-tb</code> en <code>.box</code> para mirar cómo cambia el diseño con las diferentes propiedades.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/intro-grid-example.html", '100%', 700)}}</p>
+
+<p>Cuando trabajamos en un sitio con un modo de escritura diferente al predeterminado (horizontal) o por razones creativas, ser capaces de relacionarnos con el flujo del contenido tiene mucho sentido.</p>
+
+<h2 id="Dimensiones_de_bloque_y_en_línea">Dimensiones de bloque y en línea</h2>
+
+<p>Dos conceptos claves para trabajar con las propiedades y valores al flujo relativo, son las dimensiones de bloque y en línea. Como vimos anteriormente, los métodos de diseño de CSS como Flexbox y Grid usan los conceptos de bloque (<code>block</code>) y en línea (<code>inline</code>) en vez de usar los conceptos de derecha (<code>right</code>) e izquierda (<code>left</code>) / arriba (<code>top</code>) y abajo (<code>bottom</code>) para alinear elementos.</p>
+
+<p>La dimensión en línea (<code>inline</code>) es la dimensión a lo largo de la cual se ejecuta una línea de texto en el modo de escritura en uso. Por lo tanto, en un documento en español con el texto ejecutándose horizontalmente de izquierda a derecha o un documento árabe con el texto ejecutándose horizontalmente de derecha a izquierda, la dimensión en línea es <em>horizontal</em>. Si cambiamos a un modo de escritura vertical (por ejemplo, un documento japonés), la dimensión en línea ahora es <em>vertical</em>, ya que las líneas en ese modo de escritura se ejecutan verticalmente.</p>
+
+<p>La dimensión en bloque es la dimensión en la que los bloques —como los párrafos— se muestran uno después del otro. Tanto en español como en árabe, los bloques se ejecutan verticalmente, mientras que en cualquier modo de escritura vertical se ejecutan horizontalmente.</p>
+
+<p>El siguiente diagrama muestra las direcciones de bloque y en línea en un modo de escritura horizontal:</p>
+
+<p><img alt="diagram showing the inline axis running horizontally, block axis vertically." src="https://mdn.mozillademos.org/files/16340/mdn-horizontal.png" style="display: block; height: 382px; margin: 0 auto; width: 521px;"></p>
+
+<p>El siguiente diagrama muestra las direcciones de bloque y en línea en un modo de escritura vertical:</p>
+
+<p><img alt="Diagram showing the block axis running horizontally the inline axis vertically." src="https://mdn.mozillademos.org/files/16341/mdn-vertical.png" style="display: block; height: 382px; margin: 0 auto; width: 418px;"></p>
+
+<h2 id="Soporte_en_navegadores">Soporte en navegadores</h2>
+
+<p>Las Propiedades y Valores lógicos pueden ser considerados como un par de grupos en términos de la compatibilidad actual del navegador. Algunas de las propiedades son esencialmente asignadas desde la versión física, por ejemplo {{CSSxRef("inline-size")}} por {{CSSxRef("width")}} o {{CSSxRef("margin-inline-start")}} en lugar de {{CSSxRef("margin-left")}}. Esa asignación de propiedades se está comenzando a ver bien en los diferentes navegadores; sin embargo, si miras la página de cada propiedad en la <a href="/en-US/docs/Web/CSS/CSS_Logical_Properties#Reference">referencia en MDN</a>, verás que el único navegador moderno que no cuenta con estas propiedades es Edge.</p>
+
+<p>Hay otro grupo de estas propiedades lógicas que no tienen una asignación directa con las propiedades físicas existentes. Estas son abreviaturas posibles gracias al hecho de que podemos referirnos a ambos bordes del bloque o dimensión en línea a la vez. Un ejemplo sería {{CSSxRef("margin-block")}}, que es una abreviación de {{CSSxRef("margin-block-start")}} y {{CSSxRef("margin-block-end")}}. Actualmente, estas propiedades no tiene soporte en navegadores.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: CSS Working Group está intentando decidir qué hacer con los valores abreviados de cuatro valores para las propiedades lógicas, por ejemplo, los equivalentes para configurar cuatro propiedades físicas a la vez, como márgenes con la propiedad {{CSSxRef("margin")}}. Necesitaríamos algún tipo de modificador si tuviéramos que reutilizar el margen para las propiedades relativas al flujo. Si deseas leer las sugerencias o comentarlas, el problema relevante de GitHub es <a href="https://github.com/w3c/csswg-drafts/issues/1282">#1282</a>.</p>
+</div>
+
+<h3 id="Pruebas_para_el_soporte_en_navegadores">Pruebas para el soporte en navegadores</h3>
+
+<p>Puedes probar el soporte de las propiedades y valores lógicos usando <em>feature queries</em>. Por ejemplo, {{CSSxRef("width")}}, prueba para {{CSSxRef("inline-size")}} y, si esto es soportado, establece el ancho (<code>width</code>) en automático (<code>auto</code>) y el tamaño en línea (<code>inline-size</code>) al valor del ancho (<code>width</code>) original.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/intro-feature-queries.html", "100%", 700)}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Alineamiento de caja en Grid Layout</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">Alineamiento de caja en Flex Layout</a></li>
+ <li><a href="https://www.smashingmagazine.com/2018/03/understanding-logical-properties-values/">Entendiendo Propiedades y Valores Lógicos</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">Modos de escritura</a></li>
+</ul>
diff --git a/files/es/web/css/css_logical_properties/dimensionamiento/index.html b/files/es/web/css/css_logical_properties/dimensionamiento/index.html
new file mode 100644
index 0000000000..a5a9b4063c
--- /dev/null
+++ b/files/es/web/css/css_logical_properties/dimensionamiento/index.html
@@ -0,0 +1,89 @@
+---
+title: Dimensionamiento para propiedades lógicas
+slug: Web/CSS/CSS_Logical_Properties/Dimensionamiento
+translation_of: Web/CSS/CSS_Logical_Properties/Sizing
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">En esta guía explicaremos las asignaciones relativas al flujo relativo entre las propiedades de dimensionamiento físico y lógico usados para dimensionar elementos en nuestras páginas.</p>
+
+<p>Cuando especificamos el tamaño de un ítem, las <a href="https://drafts.csswg.org/css-logical/">Propiedades y Valores Lógicos</a> te dan la habilidad de indicar el dimensionamiento en relación al flujo relativo del texto (en línea y bloque) más bien que dimensionamiento físico con relación a las dimensiones físicas: horizontal y vertical (por ejemplo, left y right). Si bien estas asignaciones de flujo relativo pueden convertirse en el valor predeterminado para muchos de nosotros, en un diseño puede usar el tamaño físico y el tamaño lógico. Es posible que desee que algunas características se relacionen siempre con las dimensiones físicas, independientemente del modo de escritura.</p>
+
+<h2 id="Asignaciones_para_dimensiones">Asignaciones para dimensiones</h2>
+
+<p>La siguiente tabla proporciona asignaciones entre propiedades lógicas y físicas. Estas asignaciones asumen que estás en un modo de escritura  <code>horizontal-tb</code>, como Inglés o Árabe, en cada caso el ancho ({{CSSxRef("width")}}) sería asignado a {{CSSxRef("inline-size")}}.</p>
+
+<p>Si tú estás en un modo de escritura vertical, entonces {{CSSxRef("inline-size")}} sería asignado a {{CSSxRef("height")}}.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propiedades Lógicas</th>
+   <th scope="col">Propiedades Físicas</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{CSSxRef("inline-size")}}</td>
+   <td>{{CSSxRef("width")}}</td>
+  </tr>
+  <tr>
+   <td>{{CSSxRef("block-size")}}</td>
+   <td>{{CSSxRef("height")}}</td>
+  </tr>
+  <tr>
+   <td>{{CSSxRef("min-inline-size")}}</td>
+   <td>{{CSSxRef("min-width")}}</td>
+  </tr>
+  <tr>
+   <td>{{CSSxRef("min-block-size")}}</td>
+   <td>{{CSSxRef("min-height")}}</td>
+  </tr>
+  <tr>
+   <td>{{CSSxRef("max-inline-size")}}</td>
+   <td>{{CSSxRef("max-width")}}</td>
+  </tr>
+  <tr>
+   <td>{{CSSxRef("max-block-size")}}</td>
+   <td>{{CSSxRef("max-height")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ejemplo_de_ancho_y_alto">Ejemplo de ancho y alto</h2>
+
+<p>Las asignaciones para el ancho ({{CSSxRef("width")}}) y el alto ({{CSSxRef("height")}}) son {{CSSxRef("inline-size")}}, que establece el largo en la dimensión en línea y {{CSSxRef("block-size")}}, que establece el largo en la dimensión en bloque. Cuando trabajamos en Inglés, si reemplazamos el ancho (<code>width</code>) con <code>inline-size</code> y el alto (<code>height</code>) con <code>block-size</code> dará el mismo diseño.</p>
+
+<p>En el siguiente ejemplo, establecemos un modo de escritura <code>horizontal-tb</code>. Cambiamos esto por <code>vertical-rl</code> y veremos que el primer ejemplo — cuando usamos <code>width</code> y <code>height</code> — permanece con el mismo tamaño en cada dimensión, a pesar de que el texto se vuelve vertical. El segundo ejemplo — cuando usamos <code>inline-size</code> y <code>block-size</code> — seguirá la dirección del texto como si todo el bloque hubiera girado.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/size-inline-block.html", '100%', 500)}}</p>
+
+<h2 id="Ejemplo_de_ancho_y_alto_mínimo">Ejemplo de ancho y alto mínimo</h2>
+
+<p>También hay asignaciones para {{CSSxRef ("min-width")}} y {{CSSxRef ("min-height")}} — estas son {{CSSxRef ("min-inline-size")}} y {{ CSSxRef ("min-block-size")}}. Estas funcionan de la misma manera que las propiedades de <code>inline-size</code> y <code>block-size</code>, pero establecen un tamaño mínimo en lugar de uno fijo.<br>
+ <br>
+ Intente cambiar el siguiente ejemplo a <code>vertical-rl</code>, como en el primer ejemplo, para ver el efecto que tiene. Estoy usando <code>min-height</code> en el primer ejemplo y <code>min-block-size</code> en el segundo.</p>
+
+<p> </p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/size-min.html", "100%", 500)}}</p>
+
+<h2 id="Ejemplo_de_ancho_y_alto_máximo">Ejemplo de ancho y alto máximo</h2>
+
+<p>Finalmente, puedes usar {{CSSxRef("max-inline-size")}} y {{CSSxRef("max-block-size")}} como reemplazos de {{CSSxRef("max-width")}} y {{CSSxRef("max-height")}}. Intenta jugar con el siguiente ejemplo de la misma manera que antes.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/size-max.html", "100%", 500)}}</p>
+
+<h2 id="Palabras_claves_para_redimensionamiento_lógico">Palabras claves para redimensionamiento lógico</h2>
+
+<p>La propiedad {{CSSxRef("resize")}} establece si un elemento se puede redimensionar o no y si tiene valores físicos de <code>horizontal</code> y <code>vertical</code>. La propiedad <code>resize</code> también tiene valores de palabras clave lógicas. Usar <code>resize: inline</code> permite cambiar el tamaño en la dimensión inline y <code>resize: block</code> permite cambiar el tamaño en la dimensión de bloque.</p>
+
+<p>El valor de la palabra clave de <code>both</code>para la propiedad de cambio de tamaño funciona ya sea que esté pensando física o lógicamente. Establece ambas dimensiones a la vez. Intenta jugar con el siguiente ejemplo.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/size-resize.html", "100%", 700)}}</p>
+
+<div class="blockIndicator warning">
+<p><strong>Nota:</strong> <span style="font-size: 1rem; letter-spacing: -0.00278rem;">Tenga en cuenta que actualmente los valores lógicos para el cambio de tamaño solo son compatibles con Firefox.</span></p>
+
+<p> </p>
+</div>
diff --git a/files/es/web/css/css_logical_properties/floating_and_positioning/index.html b/files/es/web/css/css_logical_properties/floating_and_positioning/index.html
new file mode 100644
index 0000000000..2f1654079f
--- /dev/null
+++ b/files/es/web/css/css_logical_properties/floating_and_positioning/index.html
@@ -0,0 +1,206 @@
+---
+title: Propiedades lógicas para flotantes y posicionamiento
+slug: Web/CSS/CSS_Logical_Properties/Floating_and_positioning
+translation_of: Web/CSS/CSS_Logical_Properties/Floating_and_positioning
+---
+<div>{{CSSRef}}</div>
+
+<div> </div>
+
+<p class="summary">La <a href="https://drafts.csswg.org/css-logical/">especificación de Propiedades y Valores Lógicos</a> contiene una asignación para los valores físicos {{cssxref("float")}} y {{cssxref("clear")}}, y también para las propiedades de posicionamiento usadas con <a href="/en-US/docs/Web/CSS/CSS_Positioning">positioned layout</a>. Esta guía nos permite saber cómo utilizar estas propiedades.</p>
+
+<h2 id="Asignando_propiedades_y_valores">Asignando propiedades y valores</h2>
+
+<p>La tabla a continuación detalla las propiedades y valores discutidos en esta guía junto con sus asignaciones físicas. Estas, asumen un modo de escritura ({{cssxref("writing-mode")}}), con una dirección de izquierda a derecha (left-to-right).</p>
+
+<p> </p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">
+    <p>Propiedad o valor lógico</p>
+   </th>
+   <th scope="col">
+    <p>Propiedad o valor lógico</p>
+   </th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <p>{{cssxref("float")}}: inline-start</p>
+   </td>
+   <td>
+    <p>{{cssxref("float")}}: left</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>{{cssxref("float")}}: inline-end</p>
+   </td>
+   <td>
+    <p>{{cssxref("float")}}: right</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>{{cssxref("clear")}}: inline-start</p>
+   </td>
+   <td>
+    <p>{{cssxref("clear")}}: left</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>{{cssxref("clear")}}: inline-end</p>
+   </td>
+   <td>
+    <p>{{cssxref("clear")}}: right</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>{{cssxref("inset-inline-start")}}</p>
+   </td>
+   <td>
+    <p>{{cssxref("left")}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>{{cssxref("inset-inline-end")}}</p>
+   </td>
+   <td>
+    <p>{{cssxref("right")}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>{{cssxref("inset-block-start")}}</p>
+   </td>
+   <td>
+    <p>{{cssxref("top")}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>{{cssxref("inset-block-end")}}</p>
+   </td>
+   <td>
+    <p>{{cssxref("bottom")}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>{{cssxref("text-align")}}: start</p>
+   </td>
+   <td>
+    <p>{{cssxref("text-align")}}: left</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>{{cssxref("text-align")}}: end</p>
+   </td>
+   <td>
+    <p>{{cssxref("text-align")}}: right</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<p>Además de estas propiedades asignadas, hay algunas propiedades abreviadas adicionales que son posibles al poder abordar las dimensiones de bloque y en línea. Estos no tienen mapeo a las propiedades físicas.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">
+    <p>Propiedad lógica</p>
+   </th>
+   <th scope="col">
+    <p>Propósito</p>
+   </th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <p>{{cssxref("inset-inline")}}</p>
+   </td>
+   <td>
+    <p>Establece los dos valores de inserción anteriores para la dimensión en línea simultáneamente.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>{{cssxref("inset-block")}}</p>
+   </td>
+   <td>
+    <p>Establece los dos valores de inserción anteriores para la dimensión de bloque simultáneamente.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>{{cssxref("inset")}}</p>
+   </td>
+   <td>
+    <p>Establece los cuatro valores de inserción simultáneamente.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<h2 id="Flotante_y_ejemplo_claro">Flotante y ejemplo claro</h2>
+
+<p>Los valores físicos usados con las propiedades {{cssxref("float")}} y {{cssxref("clear")}} son <code>left</code>, <code>right</code> y <code>both</code>. La especificación de las Propiedades Lógicas definen los valores <code>inline-start</code> y <code>inline-end</code> como asignación para <code>left</code> y <code>right</code>.</p>
+
+<p>En el ejemplo de abajo tenemos dos cajas — la primera tiene una caja flotante con <code>float: left</code>, la segunda con <code>float: inline-start</code>. Si tu cambias el modo de escritura (<code>writing-mode</code>) a <code>vertical-rl</code> o la dirección (<code>direction</code>) a <code>rtl</code> verás que la caja flotando a la izquierda siempre se queda en la izquierda, mientras que el ítem <code>inline-start</code>-floated sigue la dirección (<code>direction</code>) y el modo de escritura (<code>writing-mode</code>).</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/float.html", '100%', 700)}}</p>
+
+<h2 id="Ejemplo_Propiedades_de_inserción_para_diseño_posicionado">Ejemplo: Propiedades de inserción para diseño posicionado</h2>
+
+<p>El posicionamiento generalmente nos permite posicionar un elemento de una manera relativa al bloque de contención — esencialmente, insertamos el elemento en relación con el lugar donde caería en función del flujo normal. Para hacer esto, hemos usado popiedades físicas como {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} y {{cssxref("left")}}.</p>
+
+<p>Estas propiedades toman una longitud o un porcentaje como valor y se relacionan con las dimensiones de la pantalla del usuario.</p>
+
+<p>Se han creado nuevas propiedades en la especificación de Propiedades Lógicas para cuando desee que el posicionamiento se relacione con el flujo de texto en su modo de escritura. Estos son los siguientes: {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}}, {{cssxref("inset-inline-start")}} y {{cssxref("inset-inline-end")}}.</p>
+
+<p>En el siguiente ejemplo hemos usado las propiedades <code>inset-block-start</code> y <code>inset-inline-end</code> para posicionar la caja azul usando un posicionamiento absoluto dentro del área con el borde punteado de color gris, que tiene <code>position: relative</code>. Podemos cambiar la propiedad de modo de escritura (<code>writing-mode</code>) a <code>vertical-rl</code>, o agregar <code>direction: rtl</code>, y ver cómo el cuadro de flujo relativo se mantiene con la dirección del texto.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/positioning-inset.html", '100%', 700)}}</p>
+
+<h2 id="Nuevas_abreviaciones_de_dos-_y_cuatro-valores">Nuevas abreviaciones de dos- y cuatro-valores</h2>
+
+<p>Al igual que con otras propiedades en la especificación, tenemos algunas propiedades abreviadas nuevas, que permiten configurar dos o cuatro valores a la vez. Estos no tienen una equivalencia directa a propiedades físicas.</p>
+
+<ul>
+ <li>
+  <p>{{cssxref("inset")}} — pone los cuatro lados juntos.</p>
+ </li>
+ <li>
+  <p>{{cssxref("inset-inline")}} — pone los dos en línea juntos.</p>
+ </li>
+ <li>
+  <p>{{cssxref("inset-block")}} — pone los dos bloques juntos.</p>
+ </li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Los navegadores que han implementado la especificación de propiedades lógicas han implementado hasta ahora las asignaciones directas y no las abreviaturas nuevas. Consulte la sección de datos de compatibilidad del navegador en cada referencia de página de propiedades para obtener más detalles.</p>
+</div>
+
+<h2 id="Ejemplo_Valores_lógicos_para_text-align">Ejemplo: Valores lógicos para text-align</h2>
+
+<p>La propiedad {{cssxref("text-align")}} tiene valores lógicos que se relacionan con la dirección del texto. — en lugar de usar <code>left</code> y <code>right</code> usamos <code>start</code> y <code>end</code>. En el siguiente ejemplo tenemos <code>text-align: right</code> en el primer bloque y <code>text-align: end</code> en el segundo.</p>
+
+<p>Si cambias el valor de la dirección (<code>direction</code>) a <code>rtl</code> verás que la alineación permanece a la derecha para el primer bloque, pero va al extremo lógico en el segundo bloque.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/text-align.html", '100%', 700)}}</p>
+
+<p>Esto funciona de una manera más consistente cuando se usa la alineación de caja que usa inicio y final en lugar de direcciones físicas para la alineación.</p>
diff --git a/files/es/web/css/css_logical_properties/index.html b/files/es/web/css/css_logical_properties/index.html
new file mode 100644
index 0000000000..3271fee1c4
--- /dev/null
+++ b/files/es/web/css/css_logical_properties/index.html
@@ -0,0 +1,172 @@
+---
+title: Propiedades y Valores Lógicos de CSS
+slug: Web/CSS/CSS_Logical_Properties
+tags:
+  - CSS
+  - Propiedades lógicas
+  - Referencia
+  - Valores lógicos
+  - Visión general
+translation_of: Web/CSS/CSS_Logical_Properties
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Logical Properties</strong> (las propiedades lógicas en CSS) son un módulo de <a href="/en-US/docs/Web/CSS"><abbr title="Cascading Stylesheets">CSS</abbr></a> que introduce propiedades y valores lógicos, proporcionando la capacidad de controlar el diseño de forma lógica en vez de la asignación de dimensiones físicas de dirección y dimensión.</p>
+
+<p>Este módulo también define propiedades y valores lógicos para propiedades previamente definidas en <abbr title="Cascading Stylesheets">CSS</abbr> 2.1. Las propiedades lógicas definen una equivalencia a sus propiedades físicas correspondientes.  </p>
+
+<h3 id="Dimensiones_de_bloque_y_en_línea">Dimensiones de bloque y en línea</h3>
+
+<p>Las propiedades y valores lógicos usan los términos abstractos de bloque (<em>block)</em> y en línea (<em>inline)</em> para describir la dirección en la que fluyen. El sentido físico de estos términos depende del <a href="/en-US/docs/Web/CSS/CSS_Writing_Modes">modo de escritura</a>.</p>
+
+<dl>
+ <dt><a id="block-dimension" name="block-dimension">Dimensión de bloque</a></dt>
+ <dd>Es la dimensión perpendicular al flujo del texto en línea, es decir, la dimensión vertical en un modo de escritura horizontal, y la dimensión horizontal en un modo de escritura vertical. Para el texto estándar en inglés, es la dimensión vertical.</dd>
+ <dt><a name="inline-dimension">Dimensión en línea</a></dt>
+ <dd>Es la dimensión paralela al flujo del texto en línea, es decir, la dimensión horizontal en un modo de escritura horizontal, y la dimensión vertical en un modo de escritura vertical. Para el texto estándar en inglés, es la dimensión horizontal.</dd>
+</dl>
+
+<h2 id="Referencia">Referencia</h2>
+
+<h3 id="Propiedades_para_dimensionamiento">Propiedades para dimensionamiento</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("block-size")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("inline-size")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("max-block-size")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("max-inline-size")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("min-block-size")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("min-inline-size")}} {{Experimental_Inline}}</li>
+</ul>
+</div>
+
+<h3 id="Propiedades_para_márgenes_bordes_y_relleno">Propiedades para márgenes, bordes y relleno</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("border-block")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-color")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-end")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-end-color")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-end-style")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-end-width")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-start")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-start-color")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-start-style")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-start-width")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-style")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-width")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-color")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} palabra clave)</span></li>
+ <li>{{CSSxRef("border-inline")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-color")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-end")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-end-color")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-end-style")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-end-width")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-start")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-start-color")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-start-style")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-start-width")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-style")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-width")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-start-start-radius")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-start-end-radius")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-end-start-radius")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-end-end-radius")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-style")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} palabra clave)</span></li>
+ <li>{{CSSxRef("border-width")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} palabra clave)</span></li>
+ <li>{{CSSxRef("margin")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} palabra clave)</span></li>
+ <li>{{CSSxRef("margin-block")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("margin-block-end")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("margin-block-start")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("margin-inline")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("margin-inline-end")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("margin-inline-start")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("padding")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} palabra clave)</span></li>
+ <li>{{CSSxRef("padding-block")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("padding-block-end")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("padding-block-start")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("padding-inline")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("padding-inline-end")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("padding-inline-start")}} {{Experimental_Inline}}</li>
+</ul>
+</div>
+
+<h3 id="Propiedades_para_flotantes_y_posicionamiento">Propiedades para flotantes y posicionamiento</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("clear")}} (<code style="white-space: nowrap;">inline-end</code> {{Experimental_Inline}} y <span style="white-space: nowrap;"><code>inline-start</code> {{Experimental_Inline}} palabras claves)</span></li>
+ <li>{{CSSxRef("float")}} (<code style="white-space: nowrap;">inline-end</code> {{Experimental_Inline}} y <span style="white-space: nowrap;"><code>inline-start</code> {{Experimental_Inline}} palabras claves)</span></li>
+ <li>{{CSSxRef("inset")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("inset-block")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("inset-block-end")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("inset-block-start")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("inset-inline")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("inset-inline-end")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("inset-inline-start")}} {{Experimental_Inline}}</li>
+</ul>
+</div>
+
+<h3 id="Otras_propiedades">Otras propiedades</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("caption-side")}} (<code style="white-space: nowrap;">inline-end</code> {{Experimental_Inline}} y <span style="white-space: nowrap;"><code>inline-start</code> {{Experimental_Inline}} palabras claves)</span></li>
+ <li>{{CSSxRef("resize")}} {{Experimental_Inline}} (<code>block</code> {{Experimental_Inline}} y <span style="white-space: nowrap;"><code>inline</code> {{Experimental_Inline}} palabras claves)</span></li>
+ <li>{{CSSxRef("text-align")}} (<code>end</code> {{Experimental_Inline}} y <span style="white-space: nowrap;"><code>start</code> {{Experimental_Inline}} palabras claves)</span></li>
+</ul>
+</div>
+
+<h3 id="Propiedades_obsoletas">Propiedades obsoletas</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("offset-block-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">(ahora {{CSSxRef("inset-block-end")}} {{Experimental_Inline}})</span></li>
+ <li>{{CSSxRef("offset-block-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">(ahora {{CSSxRef("inset-block-start")}} {{Experimental_Inline}})</span></li>
+ <li>{{CSSxRef("offset-inline-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">(ahora {{CSSxRef("inset-inline-end")}} {{Experimental_Inline}})</span></li>
+ <li>{{CSSxRef("offset-inline-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">(ahora {{CSSxRef("inset-inline-start")}} {{Experimental_Inline}})</span></li>
+</ul>
+</div>
+
+<h2 id="Guías">Guías</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts">Conceptos básicos de propiedades y valores lógicos</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Logical_Properties/Sizing">Propiedades Lógicas para dimensionamiento</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Logical_Properties/Sizing">Propiedades Lógicas para márgenes, bordes y relleno</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Logical_Properties/Sizing">Propiedades Lógicas para flotantes y posicionamiento</a></li>
+</ul>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_los_Navegadores">Compatibilidad en los Navegadores</h2>
+
+<p>En general:</p>
+
+<ul>
+ <li>Firefox tiene soporte para las propiedades asignadas — donde hay una directa asignación desde la versión física a la versión lógica.</li>
+ <li>Chrome, desde la versión 69, tiene soporte para las propiedades asignadas.</li>
+ <li>Edge actualmente no tiene soporte.</li>
+ <li>Firefox 66 introduce soporte para dos valores abreviados.</li>
+</ul>
+
+<p>Mira la página de la propiedad en específico para tener una información más completa sobre su compatibilidad.</p>
diff --git a/files/es/web/css/css_logical_properties/margins_borders_padding/index.html b/files/es/web/css/css_logical_properties/margins_borders_padding/index.html
new file mode 100644
index 0000000000..198bf38300
--- /dev/null
+++ b/files/es/web/css/css_logical_properties/margins_borders_padding/index.html
@@ -0,0 +1,298 @@
+---
+title: 'Propiedades lógicas para márgenes, bordes y rellenos'
+slug: Web/CSS/CSS_Logical_Properties/Margins_borders_padding
+translation_of: Web/CSS/CSS_Logical_Properties/Margins_borders_padding
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary">La <a href="https://drafts.csswg.org/css-logical/">especificación de Propiedades y Valores Lógicos</a> define asignaciones relativas al flujo para las diversas propiedades de margen, borde, relleno y sus abreviaturas. En esta guía echamos un vistazo a estos.</p>
+
+<p class="summary">Si ha visto la página principal de <a href="/en-US/docs/Web/CSS/CSS_Logical_Properties">Propiedades y Valores Lógicos de CSS</a>, verá que hay una gran cantidad de propiedades en la lista. Esto se debe principalmente al hecho de que hay cuatro valores a largo plazo para cada margen, borde y lado de relleno, más todos los valores abreviados.</p>
+
+<h2 id="Asignaciones_para_márgenes_bordes_y_rellenos">Asignaciones para márgenes, bordes, y rellenos</h2>
+
+<p>La especificación detalla la asignación para cada valor lógico con una contraparte física. En la tabla de abajo he dado estos valores asignados asumiendo que el modo de escritura ({{cssxref("writing-mode")}}) en uso es <code>horizontal-tb</code> — con una dirección de izquierda a derecha. La dirección en línea por lo tanto va horizontalmente — izquierda a derecha — y {{cssxref("margin-inline-start")}} debería ser quivalente a {{cssxref("margin-left")}}.</p>
+
+<p>Si usaste el modo de escritura <code>horizontal-tb</code> con una dirección del texto de derecha a izquierda, entonces {{cssxref("margin-inline-start")}} debería ser el mismo que {{cssxref("margin-right")}}, y en un modo de escritura vertical esto debería ser el mismo que usar {{cssxref("margin-top")}}.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propiedad Lógica</th>
+   <th scope="col">Propiedad Física</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{cssxref("border-block-end")}}</td>
+   <td>{{cssxref("border-bottom")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-block-end-color")}}</td>
+   <td>{{cssxref("border-bottom-color")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-block-end-style")}}</td>
+   <td>{{cssxref("border-bottom-style")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-block-end-width")}}</td>
+   <td>{{cssxref("border-bottom-width")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-block-start")}}</td>
+   <td>{{cssxref("border-top")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-block-start-color")}}</td>
+   <td>{{cssxref("border-top-color")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-block-start-style")}}</td>
+   <td>{{cssxref("border-top-style")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-block-start-width")}}</td>
+   <td>{{cssxref("border-top-width")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-end")}}</td>
+   <td>{{cssxref("border-right")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-end-color")}}</td>
+   <td>{{cssxref("border-right-color")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-end-style")}}</td>
+   <td>{{cssxref("border-right-style")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-end-width")}}</td>
+   <td>{{cssxref("border-right-width")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-start")}}</td>
+   <td>{{cssxref("border-left")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-start-color")}}</td>
+   <td>{{cssxref("border-left-color")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-start-style")}}</td>
+   <td>{{cssxref("border-left-style")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-start-width")}}</td>
+   <td>{{cssxref("border-left-width")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-start-start-radius")}}</td>
+   <td>{{cssxref("border-top-left-radius")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-start-end-radius")}}</td>
+   <td>{{cssxref("border-bottom-left-radius")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-end-start-radius")}}</td>
+   <td>{{cssxref("border-top-right-radius")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-end-end-radius")}}</td>
+   <td>{{cssxref("border-bottom-right-radius")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("margin-block-end")}}</td>
+   <td>{{cssxref("margin-bottom")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("margin-block-start")}}</td>
+   <td>{{cssxref("margin-top")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("margin-inline-end")}}</td>
+   <td>{{cssxref("margin-right")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("margin-inline-start")}}</td>
+   <td>{{cssxref("margin-left")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("padding-block-end")}}</td>
+   <td>{{cssxref("padding-bottom")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("padding-block-start")}}</td>
+   <td>{{cssxref("padding-top")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("padding-inline-end")}}</td>
+   <td>{{cssxref("padding-right")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("padding-inline-start")}}</td>
+   <td>{{cssxref("padding-left")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Hay también algunas abreviaciones que han sido posibles porque tenemos la capacidad de apuntar ambos bloques o ambos bordes en línea de la caja simultáneamente. Estas abreviaciones no tienen equivalente físico.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propiedad</th>
+   <th scope="col">Propósito</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{cssxref("border-block")}}</td>
+   <td>Establece {{cssxref("border-color")}}, {{cssxref("border-style")}}, y {{cssxref("border-width")}} para ambos bordes de bloque.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-block-color")}}</td>
+   <td>Establece  <code>border-color</code> para ambos bordes de bloque.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-block-style")}}</td>
+   <td>Establece  <code>border-style</code> para ambos bordes de bloque.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-block-width")}}</td>
+   <td>Establece  <code>border-width</code> para ambos bordes de bloque.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline")}}</td>
+   <td>Establece  <code>border-color</code>, <code>-style</code>, y <code>-width</code> para ambos bordes en línea.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-color")}}</td>
+   <td>Establece  <code>border-color</code> para ambos bordes en línea.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-style")}}</td>
+   <td>Establece  <code>border-style</code> para ambos bordes en línea.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-width")}}</td>
+   <td>Establece <code>border-width</code> para ambos bordes en línea.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("margin-block")}}</td>
+   <td>Establece todos los {{cssxref("margin")}}s en bloque.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("margin-inline")}}</td>
+   <td>Establece todos los <code>margin</code>s en línea.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("padding-block")}}</td>
+   <td>Establece {{cssxref("padding")}} en bloque.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("padding-inline")}}</td>
+   <td>Establece el <code>padding</code> en línea.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ejemplo_para_márgenes">Ejemplo para márgenes</h2>
+
+<p>Las propiedades asignadas para márgenes de {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}}, {{cssxref("margin-block-start")}}, y {{cssxref("margin-inline-end")}} pueden ser usadas en lugar de sus contrapartes físicas.</p>
+
+<p>En el siguiente ejemplo, crearemos dos cajas y agregaremos diferentes tamaños de márgenes a cada borde. Hemos agregado un contenedor con un borde para poder hacer el márgen más notorio.</p>
+
+<p>Una caja usa propiedades físicas y la otra usa propiedades lógicas. Intenta cambiar la propiedad {{cssxref("direction")}} a <code>rtl</code> para hacer que los cuadros se muestren en dirección de derecha a izquierda, los márgenes del primer cuadro permanecerán en el mismo lugar, mientras que los márgenes en la dimensión en línea del segundo cuadro cambiarán.</p>
+
+<p>También puedes intentar cambiar el modo de escritura (<code>writing-mode</code>) de <code>horizontal-tb</code> a <code>vertical-rl</code>. De nuevo, notarás cómo las márgenes permanecen en el mismo lugar de la primera caja, pero cambia para seguir la dirección del texto en el segundo.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/margin-longhands.html", '100%', 700)}}</p>
+
+<h3 id="Abreviaciones_para_márgenes">Abreviaciones para márgenes</h3>
+
+<p>Como ahora podemos apuntar a ambos lados de la caja — ya sea ambos lados en bloque o ambos lados en línea either — hay nuevas abreviaciones disponibles, {{cssxref("margin-inline")}} y {{cssxref("margin-block")}}, que aceptan dos valores. El primer valor se aplicará al comienzo de esta dimensión y la segunda al final. Si tú solo usas un valor, se aplica para ambos.</p>
+
+<p>En un modo de escritura horizontal este CSS aplicaría un margen de 5px arriba de la caja y un margen de 10px abajo.</p>
+
+<pre class="brush: css">.box {
+  margin-block: 5px 10px;
+}</pre>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Las propiedades abreviadas <code>margin-inline</code> y <code>margin-block</code> se enviaron en Firefox 66. Como hay nuevas propiedades, mira el soporte en el navegador antes de usarlas.</p>
+</div>
+
+<h2 id="Ejemplos_para_rellenos_(Paddings)">Ejemplos para rellenos (Paddings)</h2>
+
+<p>Las propiedades asignadas para rellenos de {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}}, {{cssxref("padding-block-start")}}, y {{cssxref("padding-inline-end")}} pueden ser usadas en lugar de sus contrapartes físicas.</p>
+
+<p>En el siguiente ejemplo tenemos dos cajas, una de ellas está usando propiedades de relleno físico y la otra propiedades de relleno lógico. Con un modo de escritura (<code>writing-mode</code>) de <code>horizontal-tb</code>, en ambas cajas aparecerán lo mismo.</p>
+
+<p>Intenta cambiar la propiedad <code>direction</code> a <code>rtl</code> para hacer que las cajas se muestren en dirección de derecha a izquierda, los rellenos del primer cuadro permanecerán en el mismo lugar, mientras que los rellenos en la dimensión en línea del segundo cuadro cambiarán.</p>
+
+<p>También puedes intentar cambiar el modo de escritura (<code>writing-mode</code>) de <code>horizontal-tb</code> a <code>vertical-rl</code>. De nuevo, notarás cómo los rellenos permanecen en el mismo lugar de la primera caja, pero cambia para seguir la dirección del texto en el segundo.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/padding-longhands.html", '100%', 700)}}</p>
+
+<h3 id="Abreviaciones_para_rellenos_(paddings)">Abreviaciones para rellenos (paddings)</h3>
+
+<p>Como con las márgenes, hay dos abreviaciones para rellenos — {{cssxref("padding-inline")}} y {{cssxref("padding-block")}} — que permiten configurar el relleno a las dimenciones de bloque y en línea, respectivamente.</p>
+
+<p>En un modo de escritura horizontal este CSS aplicaría un relleno de 5px arriba de la caja y un relleno de 10px abajo:</p>
+
+<pre class="brush: css">.box {
+  padding-block: 5px 10px;
+}</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Las abreviaciones de las propiedades <code>padding-inline</code> y <code>padding-block</code> se enviaron en Firefox 66. Como hay nuevas propiedades, mira el soporte en el navegador antes de usarlas.</p>
+</div>
+
+<h2 id="Ejemplos_para_bordes">Ejemplos para bordes</h2>
+
+<p>Las propiedades del borde son la razón principal por la que las propiedades y valores lógicos parecen tener tantas propiedades, ya que tenemos <em>longhands</em> para el color, el ancho y el estilo del borde en cada lado de una caja, junto con las abreviaciones para establecer los tres a la vez por cada lado. Al igual que con el margen y el relleno, tenemos una versión asignada de cada propiedad física.</p>
+
+<p>El siguiente demo usa algunas <em>longhands </em><span style="font-size: 1rem; letter-spacing: -0.00278rem;">y tres valores de abreviaciones. Como con los otros demos, intenta cambiar la propiedad </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">direction</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> a </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">rtl</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> para que las cajas se muestren en dirección de derecha a izquierda, o cambia el modo de escritura (</span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">writing-mode</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">) de </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">horizontal-tb</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> a </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">vertical-rl</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">.</span></p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/border-longhands.html", '100%', 700)}}</p>
+
+<h3 id="Nuevas_abreviaciones_para_bordes">Nuevas abreviaciones para bordes</h3>
+
+<p>Hay valores abreviados de dos valores para establecer el ancho, el estilo y el color del bloque o dimensión en línea, y valores abreviados de dos valores para establecer los tres valores en la dimensión de bloque o enlínea. El siguiente código, en un modo de escritura horizontal, le dará un borde sólido verde de 2px en la parte superior e inferior del cuadro, y un borde púrpura de puntos de 4px a la izquierda y la derecha.</p>
+
+<pre class="brush: css">.box {
+  border-block: 2px solid green;
+  border-inline-width: 4px;
+  border-inline-style: dotted;
+  border-inline-color: rebeccapurple;
+}</pre>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Estas dos abreviaciones fueron enviadas en Firefox 66, mira el soporte en los navegadores antes de usar estas propiedades ya que puede que en otros navegadores aún no estén implementadas.</p>
+</div>
+
+<h3 id="Flujo_de_propiedades_relativas_del_border-radius">Flujo de propiedades relativas del border-radius</h3>
+
+<p> </p>
+
+<p>La especificación ha agregado recientemente valores relativos al flujo para las longitudes {{cssxref ("border-radius")}}. Estos aún no han sido implementados por ningún navegador. El siguiente ejemplo, en un modo de escritura horizontal, establecería el radio del borde superior derecho en 1em, la parte inferior derecha a 0, la parte inferior izquierda a 20px y la parte superior izquierda a 40px.</p>
+
+<p> </p>
+
+<pre class="brush: css">.box {
+  border-end-start-radius: 1em;
+  border-end-end-radius: 0;
+  border-start-end-radius: 20px;
+  border-start-start-radius: 40px;
+}</pre>
+
+<h2 id="Indicating_logical_values_for_the_4-value_shorthand_syntax">Indicating logical values for the 4-value shorthand syntax</h2>
+
+<p>La especificación hace una sugerencia para los métodos abreviados de cuatro valores, como la propiedad de <code>margin</code>, sin embargo, la decisión final sobre cómo debe indicarse esto aún no se ha resuelto, y se trata en <a href="https://github.com/w3c/csswg-drafts/issues/1282">este issue</a>.</p>
+
+<p>El uso de una abreviatura de cuatro valores, como el margen, el relleno o el borde, utilizará actualmente las versiones físicas, por lo que si es importante seguir el flujo del documento, use las propiedades <em>longhand</em> por el momento.</p>
+
+<p> </p>