Merge pull request #53 from fiji-flo/unslugging-es

Unslugging es

3 files changed, 330 insertions, 0 deletions

diff --git a/files/es/web/css/css_box_model/index.html b/files/es/web/css/css_box_model/index.html
new file mode 100644
index 0000000000..c051e7e720
--- /dev/null
+++ b/files/es/web/css/css_box_model/index.html
@@ -0,0 +1,166 @@
+---
+title: Modelo de Caja de CSS
+slug: Web/CSS/CSS_Box_Model
+tags:
+  - CSS
+  - Modelo de Caja CSS
+  - Referencia CSS
+  - Visión general
+translation_of: Web/CSS/CSS_Box_Model
+original_slug: Web/CSS/CSS_Modelo_Caja
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>El modelo de caja CSS </strong> es un módulo  CSS que define cajas rectangulares, incluyendo sus rellenos y márgenes, que son generadas para los elementos y que se disponen de acuerdo al modelo de formato visual.</p>
+
+<h2 id="Referencia">Referencia</h2>
+
+<h3 id="Propiedades">Propiedades</h3>
+
+<h4 id="Propiedades_que_controlan_el_flujo_del_contenido_en_una_caja.">Propiedades que controlan el flujo del contenido en una caja.</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("box-decoration-break")}}</li>
+ <li>{{cssxref("box-sizing")}}</li>
+ <li>{{cssxref("overflow")}}</li>
+ <li>{{cssxref("overflow-x")}}</li>
+ <li>{{cssxref("overflow-y")}}</li>
+</ul>
+</div>
+
+<h4 id="Propiedades_que_controlan_el_tamaño_de_una_caja.">Propiedades que controlan el tamaño de una caja.</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("height")}}</li>
+ <li>{{cssxref("width")}}</li>
+ <li>{{cssxref("max-height")}}</li>
+ <li>{{cssxref("max-width")}}</li>
+ <li>{{cssxref("min-height")}}</li>
+ <li>{{cssxref("min-width")}}</li>
+</ul>
+</div>
+
+<h4 id="Propiedades_que_controlan_los_márgenes_de_una_caja.">Propiedades que controlan los márgenes de una caja.</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("margin")}}</li>
+ <li>{{cssxref("margin-bottom")}}</li>
+ <li>{{cssxref("margin-left")}}</li>
+ <li>{{cssxref("margin-right")}}</li>
+ <li>{{cssxref("margin-top")}}</li>
+</ul>
+</div>
+
+<h4 id="Propiedades_que_controlan_los_rellenos_de_una_caja">Propiedades que controlan los rellenos de una caja</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("padding")}}</li>
+ <li>{{cssxref("padding-bottom")}}</li>
+ <li>{{cssxref("padding-left")}}</li>
+ <li>{{cssxref("padding-right")}}</li>
+ <li>{{cssxref("padding-top")}}</li>
+</ul>
+</div>
+
+<h4 id="Otras_propiedades">Otras propiedades</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>{{cssxref("visibility")}}</li>
+</ul>
+</div>
+
+<h2 id="Guías_y_Herramientas">Guías y Herramientas</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">Introduction to the CSS box model</a></dt>
+ <dd>Explica uno de los conceptos fundamentales de CSS, el modelo de caja: describe el significado del margen, del relleno, así como de las diferentes zonas de una caja.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Mastering margin collapsing</a></dt>
+ <dd>En determinados casos dos márgenes adyacentes se convierten en uno. Este artículo explica cuando sucede esto y cómo controlarlo.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator">Box-shadow generator</a></dt>
+ <dd>Una herramienta interactiva que permite crear sombras y proporciona la síntaxis necesaria para generar dichas sombras usando la propiedad {{cssxref("box-shadow")}}.</dd>
+</dl>
+
+<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("CSS3 Box")}}</td>
+   <td>{{Spec2("CSS3 Box")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "box.html")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>Definición Inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>3.0</td>
+   <td>3.5</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/css/css_box_model/introduction_to_the_css_box_model/index.html b/files/es/web/css/css_box_model/introduction_to_the_css_box_model/index.html
new file mode 100644
index 0000000000..985d15eef6
--- /dev/null
+++ b/files/es/web/css/css_box_model/introduction_to_the_css_box_model/index.html
@@ -0,0 +1,67 @@
+---
+title: Introducción al Modelo de Caja de CSS
+slug: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
+tags:
+  - CSS
+  - Guía
+  - Modelo de Caja
+  - Referencia
+translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
+original_slug: Web/CSS/CSS_Modelo_Caja/Introducción_al_modelo_de_caja_de_CSS
+---
+<div>{{CSSRef}}</div>
+
+<p><span id="result_box" lang="es">Al diseñar un documento, el motor de representación del navegador representa cada elemento como un cuadro rectangular según el estándar</span><span lang="es"><span> <strong>modelo de caja de CSS</strong>.</span> <span>CSS determina el tamaño, la posición y las propiedades (color, fondo, tamaño del borde, etc.) de estos cuadros.</span></span></p>
+
+<p><span id="result_box" lang="es"><span>Cada caja se compone de cuatro partes (o áreas), definidas por sus respectivos límites: el <em>límite del contenido</em>, el <em>límite del relleno (padding)</em>, el <em>límite del borde</em> y el <em>límite del margen</em>.</span></span></p>
+
+<p><img alt="CSS Box model" src="https://mdn.mozillademos.org/files/8685/boxmodel-(3).png" style="height: 384px; width: 548px;"></p>
+
+<p><a name="content-area"></a><span id="result_box" lang="es"><span>El <strong>área de contenido</strong>, delimitada por el límite del contenido, contiene el contenido "real" del elemento, como lo puede ser texto, imagen o un reproductor de video.</span> <span>Sus dimensiones son el <em>ancho del contenido</em> (o el <em>ancho de la caja de contenido</em>) y la <em>altura del contenido</em> (o la <em>altura de la caja de contenido</em>).</span> <span>A menudo tiene un color de fondo o una imagen de fondo.</span></span></p>
+
+<p><span id="result_box" lang="es"><span>Si la propiedad </span></span>{{cssxref("box-sizing")}}<span lang="es"><span> está configurada en </span></span><code>content-box</code><span lang="es"><span> (default), el tamaño del área de contenido se puede definir explícitamente con las propiedades de </span></span>{{cssxref("width")}}<span lang="es"><span>, </span></span>{{cssxref("min-width")}}<span lang="es"><span>, </span></span>{{cssxref("max-width")}}<span lang="es"><span>, </span></span>{{ cssxref("height")}}<span lang="es"><span>, </span></span>{{cssxref("min-height")}}<span lang="es"><span> y </span></span>{{cssxref("max-height")}}<span lang="es"><span>.</span></span></p>
+
+<p><a name="padding-area"></a><span id="result_box" lang="es"><span>El <strong>área de relleno</strong> (padding), delimitada por el límite del relleno, extiende el área de contenido para incluir el relleno del elemento.</span> <span>Sus dimensiones son el <em>ancho de la caja de relleno</em> y la <em>altura de la caja de relleno</em>.</span> <span>Cuando el área de contenido tiene un fondo, se extiende dentro del relleno.</span></span></p>
+
+<p><span id="result_box" lang="es"><span>El espesor del relleno está determinado por </span></span><span lang="es"><span>las propiedades </span></span>{{cssxref("padding-top")}}<span lang="es"><span>, </span></span>{{cssxref("padding-right")}}<span lang="es"><span>, </span></span>{{cssxref("padding-bottom")}}<span lang="es"><span>, </span></span>{{cssxref("padding-left")}}<span lang="es"><span>, y la propiedad abreviada </span></span>{{cssxref("padding")}}<span lang="es"><span>.</span></span></p>
+
+<p><a name="border-area"></a><span id="result_box" lang="es"><span>El <strong>área del borde</strong>, delimitada por el límite del borde, extiende el área de relleno para incluir los bordes del elemento.</span> <span>Sus dimensiones son el <em>ancho de la caja del borde</em> y la <em>altura de la caja del borde</em>.</span></span></p>
+
+<p><span id="result_box" lang="es"><span>El espesor de los bordes está determinado por las propiedades {{cssxref("border-width")}} y la propiedad abreviada {{cssxref("border")}}.</span> <span>Si la propiedad {{cssxref("box-sizing")}} se establece en </span></span><code>border-box</code><span lang="es"><span>, el tamaño del área del borde se puede definir explícitamente con las propiedades {{cssxref("width")}}, {{cssxref("min-</span> <span>width")}}, {{cssxref("max-width")}}, {{cssxref("height")}}, {{cssxref("min-height")}}, y {{cssxref("max</span><span>-height")}}.</span></span></p>
+
+<p><a name="margin-area"></a><span id="result_box" lang="es"><span>El <strong>área del margen</strong>, delimitada por el límite del margen, extiende el área del borde para incluir un área vacía utilizada para separar el elemento de sus vecinos.</span> <span>Sus dimensiones son el <em>ancho de la caja del margen</em> y la <em>altura de la caja del margen</em>.</span></span></p>
+
+<p><span id="result_box" lang="es"><span>El tamaño del área del margen está determinado por las propiedades </span></span>{{cssxref("margin-top")}}<span lang="es"><span>, {{cssxref("margin-right")}}, {{cssxref ("margin-bottom")}}, {</span> <span>{cssxref("margin-left")}}, y la propiedad abreviada {{cssxref ("margin")}}.</span> <span>Cuando se produce el</span></span> <a href="/en/CSS/margin_collapsing" title="en/CSS/margin_collapsing">colapso del margen</a><span lang="es"><span>, el área del margen no está claramente definida ya que los márgenes se comparten entre las cajas.</span></span></p>
+
+<p><span id="result_box" lang="es"><span>Finalmente, ten en cuenta que para elementos en línea no reemplazados, la cantidad de espacio ocupado (la contribución a la altura de la línea) está determinada por la propiedad {{cssxref ('line-height')}}, aunque los bordes y</span> <span>el relleno todavía se muestran alrededor del contenido.</span></span></p>
+
+<h2 id="Especificación">Especificación</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("CSS2.1","box.html#box-dimensions")}}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td><span id="result_box" lang="es"><span>Aunque está redactado con más precisión, no hay cambio práctico.</span></span></td>
+  </tr>
+  <tr>
+   <td>{{ SpecName("CSS1","#formatting-model")}}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td><span class="short_text" id="result_box" lang="es"><span>Definición inicial</span></span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{css_key_concepts}}</li>
+ <li>Propiedades CSS relacionadas: {{ cssxref("box-sizing") }}, {{ cssxref("background-clip") }}, {{ cssxref("height") }}, {{ cssxref("max-height") }}, {{ cssxref("min-height") }}, {{ cssxref("width") }}, {{ cssxref("max-height") }}, {{ cssxref("min-height") }}, {{ cssxref("padding") }}, {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }}, {{ cssxref("border") }}, {{ cssxref("border-top") }}, {{ cssxref("border-right") }}, {{ cssxref("border-bottom") }}, {{ cssxref("border-left") }}, {{ cssxref("border-width") }}, {{ cssxref("border-top-width") }}, {{ cssxref("border-right-width") }}, {{ cssxref("border-bottom-width") }}, {{ cssxref("border-left-width") }}, {{ cssxref("margin") }}, {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }}</li>
+</ul>
diff --git a/files/es/web/css/css_box_model/mastering_margin_collapsing/index.html b/files/es/web/css/css_box_model/mastering_margin_collapsing/index.html
new file mode 100644
index 0000000000..6c4f7a753e
--- /dev/null
+++ b/files/es/web/css/css_box_model/mastering_margin_collapsing/index.html
@@ -0,0 +1,97 @@
+---
+title: Entendiendo el colapso de margen
+slug: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
+tags:
+  - CSS
+  - CSS Box Model
+  - Guía
+  - Referencia
+translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
+original_slug: Web/CSS/CSS_Modelo_Caja/Mastering_margin_collapsing
+---
+<div>{{CSSRef}}</div>
+
+<p>Los márgenes <a href="/es/docs/Web/CSS/margin-top">Top</a> y <a href="/es/docs/Web/CSS/margin-bottom">bottom</a> de los bloques a veces están combinados (colapsados) en un solo margen cuyo tamaño es el mayor de los márgenes combinados, un comportamiento conocido como <strong>colapso de margen</strong>. Ten en cuenta que los márgenes de <a href="/es/docs/Web/CSS/float">flotantes</a> y elementos con <a href="/es/docs/Web/CSS/position"> posición absoluta</a> nunca colapsan.</p><p></p>
+
+<p>El colapso de margen ocurre en tres casos básicos:</p>
+
+<dl>
+ <dt>Hermanos adjacentes</dt>
+ <dd>Los márgenes de los hermanos adjacentes son colapsados (excepto cuando el último hermano necesita ser <a href="/es/docs/Web/CSS/clear">limpiado</a> después de usar los flotantes).</dd>
+ <dt>Padre y primer/último hijo</dt>
+ <dd>Si no hay un borde, padding, contenido en línea, <a href="/es/docs/Web/Guide/CSS/Block_formatting_context">block formatting context</a> creado, o un <em><a href="/es/docs/Web/CSS/clear">limpiado</a></em> para separar el {{cssxref("margin-top")}} de un bloque del {{cssxref("margin-top")}} de su primer bloque hijo; o no hay borde, padding, contenido en línea, {{cssxref("height")}}, {{cssxref("min-height")}}, o {{cssxref("max-height")}} para separar el {{cssxref("margin-bottom")}} de un bloque del {{cssxref("margin-bottom")}} de su último hijo, entonces esos márgenes colapsan. El margen colapsado termina fuera del padre.</dd>
+ <dt>Bloques vacíos</dt>
+ <dd>Si no hay borde, padding, contenido en línea, {{cssxref("height")}}, o {{cssxref("min-height")}} para separar el {{cssxref("margin-top")}} de un bloque de su {{cssxref("margin-bottom")}}, entonces sus márgenes superiores e inferiores colapsan.</dd>
+</dl>
+ <p>Cosas a tener en cuenta:</p>
+
+
+<ul>
+ <li>Cuando estos casos están combinados ocurrirá un colapso de márgenes más complejo (de más de dos márgenes).</li>
+ <li>Estas reglas se aplican incluso a márgenes con valor cero, así que el margen del primer/último hijo siempre termina fuera de su padre (de acuerdo a las reglas de arriba) independientemente de que el margen del padre sea o no sea cero.</li>
+ <li>Cuando se trata de márgenes negativos, el tamaño del margen colapsado es la suma del margen positivo más grande y el margen negativo más pequeño (el más negativo).</li>
+ <li>Cuando todos los márgenes son negativos, el tamaño del margen colapsado es el margen más pequeño (el más negativo). Esto se aplica tanto a los elementos adyacentes como a los elementos anidados.</li>
+</ul>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;El margen inferior de este párrafo está colapsado ....&lt;/p&gt;
+&lt;p&gt;... con el margen superior de este párrafo, lo que deja un margen de&lt;code&gt;1.2rem&lt;/code&gt; entre ellos.&lt;/p&gt;
+
+&lt;div&gt;Este elemento padre contiene dos párrafos!
+  &lt;p&gt;Este párrafo tiene un margen de &lt;code&gt;.4rem&lt;/code&gt;  entre él y el texto anterior.&lt;/p&gt;
+  &lt;p&gt;Mi margen inferior se colapsa con mi padre, produciendo un margen inferior de &lt;code&gt;2rem&lt;/code&gt;.&lt;/p&gt;
+&lt;/div&gt;
+
+&lt;p&gt;Estoy &lt;code&gt;2rem&lt;/code&gt; por debajo del elemento de arriba.&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  margin: 2rem 0;
+  background: lavender;
+}
+
+p {
+  margin: .4rem 0 1.2rem 0;
+  background: yellow;
+}</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample('Ejemplos', 'auto', 350)}}</p>
+
+
+
+<p> </p>
+
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="También_puedes_ver">También puedes ver</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/CSS/Referencia_CSS">CSS Reference</a></li>
+</ul>
+<ul>
+ <li>{{css_key_concepts}}</li>
+</ul>