1 files changed, 334 insertions, 0 deletions
diff --git a/files/es/web/css/introducción/boxes/index.html b/files/es/web/css/introducción/boxes/index.html
new file mode 100644
index 0000000000..1feede593a
--- /dev/null
+++ b/files/es/web/css/introducción/boxes/index.html
@@ -0,0 +1,334 @@
+---
+title: Boxes
+slug: Web/CSS/Introducción/Boxes
+translation_of: Learn/CSS/Building_blocks
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Lists", "Lists") }}Esta es la sección 11 del Tutorial de  <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a> ; <span id="result_box" lang="es"><span class="hps alt-edited">se describen</span> <span class="hps">cómo se puede</span> <span class="hps">usar CSS para</span> <span class="hps">controlar el espacio</span> <span class="hps">que un elemento</span> <span class="hps">ocupa</span> <span class="hps">cuando se muestra</span><span>.</span> <span class="hps">En</span> <span class="hps">su</span> <span class="hps">documento de ejemplo</span><span>, se cambia el</span> <span class="hps">espacio</span> <span class="hps alt-edited">y se agregan</span> <span class="hps">reglas</span> <span class="hps">decorativos.</span></span></p>
+
+<h2 class="clearLeft" id="Información_Cajas"><span id="result_box" lang="es"><span class="hps">Información:</span> <span class="hps">Cajas</span></span></h2>
+
+<p><span id="result_box" lang="es"><span class="hps">Cuando</span> <span class="hps">el navegador muestra</span> <span class="hps">un elemento</span><span>, el elemento</span> <span class="hps alt-edited">ocupa un espacio</span><span>.</span> <span class="hps">Hay</span> <span class="hps">cuatro partes en</span> <span class="hps">el espacio</span> <span class="hps">que ocupa</span><span>.</span></span></p>
+
+<p><span id="result_box" lang="es"><span class="hps">En el centro,</span> <span class="hps">existe</span> <span class="hps">el espacio que el</span> <span class="hps">elemento</span> <span class="hps">necesita para mostrar</span> <span class="hps">su contenido.</span> <span class="hps">Alrededor de</span> <span class="hps">eso, no hay</span> <span class="hps">relleno.</span> <span class="hps alt-edited">En torno</span> <span class="hps alt-edited">de est, hay</span> <span class="hps alt-edited">un borde</span><span>.</span> <span class="hps alt-edited">En torno</span> <span class="hps alt-edited">esto, hay</span> <span class="hps">un margen</span> <span class="hps">que separa</span> <span class="hps alt-edited">este elemento</span> <span class="hps">de otros elementos</span><span>.</span></span></p>
+
+<table>
+ <tbody>
+  <tr>
+   <td style="width: 22em;">
+    <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;">
+    <p style="text-align: center; margin: 0px;">margin</p>
+
+    <p style="text-align: center; margin: 0px 0px -.75em 0px;">border</p>
+
+    <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
+    <p style="text-align: center;">padding</p>
+
+    <div style="background-color: #eee;">
+    <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">element</p>
+    </div>
+    </div>
+    </div>
+
+    <p><span class="short_text" id="result_box" lang="es"><span class="hps">El</span> <span class="hps">gris pálido</span> <span class="hps">muestra</span> <span class="hps">partes del</span> <span class="hps">diseño.</span></span></p>
+   </td>
+   <td>
+    <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;">
+    <p style="text-align: center; margin: 0px;"> </p>
+
+    <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p>
+
+    <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
+    <p style="text-align: center;"> </p>
+
+    <div style="background-color: #fff;">
+    <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">element</p>
+    </div>
+    </div>
+    </div>
+
+    <p><span class="short_text" id="result_box" lang="es"><span class="hps">Esto es</span> <span class="hps">lo que se ve</span> <span class="hps">en su navegador</span><span>.</span></span></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><span id="result_box" lang="es"><span class="hps">El</span> <span class="hps alt-edited">relleno, el borde</span> <span class="hps">y</span> <span class="hps alt-edited">el margen</span> <span class="hps">pueden tener diferentes tamaños</span> <span class="hps">en la parte superior</span><span class="alt-edited">, derecha, inferior</span> <span class="hps">e izquierda del</span> <span class="hps">elemento</span><span>.</span> <span class="hps alt-edited">Alguno o</span> <span class="hps">todos estos tamaños</span> <span class="hps">pueden</span> <span class="hps">ser cero</span><span>.</span></span></p>
+
+<h3 id="Coloreando">Coloreando</h3>
+
+<p><span id="result_box" lang="es"><span class="hps">El relleno es</span> <span class="hps">siempre</span> <span class="hps">el mismo color que</span> <span class="hps">el elemento del fondo</span><span>.</span> <span class="hps">Así que</span> <span class="hps">cuando se establece el</span> <span class="hps">color de fondo</span><span>, se ve el</span> <span class="hps">color aplicado</span> <span class="hps">al elemento</span> <span class="hps">en sí y su</span> <span class="hps">relleno.</span> <span class="hps">El margen es</span> <span class="hps">siempre</span> <span class="hps">transparente.</span></span></p>
+
+<table>
+ <tbody>
+  <tr>
+   <td style="width: 22em;">
+    <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;">
+    <p style="text-align: center; margin: 0px;">margin</p>
+
+    <p style="text-align: center; margin: 0px 0px -.75em 0px;">border</p>
+
+    <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
+    <p style="text-align: center;">padding</p>
+
+    <div style="background-color: #ded;">
+    <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">element</p>
+    </div>
+    </div>
+    </div>
+
+    <p><span class="short_text" id="result_box" lang="es"><span class="hps">El elemento tiene</span> <span class="hps">un fondo verde</span> <span class="hps">.</span></span></p>
+   </td>
+   <td>
+    <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;">
+    <p style="text-align: center; margin: 0px;"> </p>
+
+    <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p>
+
+    <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
+    <p style="text-align: center;"> </p>
+
+    <div style="background-color: #efe;">
+    <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">element</p>
+    </div>
+    </div>
+    </div>
+
+    <p><span class="short_text" id="result_box" lang="es"><span class="hps">Esto es</span> <span class="hps">lo que se ve</span> <span class="hps">en su navegador</span><span>.</span></span></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Borders">Borders</h3>
+
+<p><span id="result_box" lang="es"><span class="hps">Puede utilizar</span> <span class="hps alt-edited">los bordes</span> <span class="hps">para decorar</span> <span class="hps">elementos con</span> <span class="hps">líneas o cuadros</span><span>.</span><br>
+ <br>
+ <span class="hps">Para especificar</span> <span class="hps">la misma</span> <span class="hps">frontera</span> <span class="hps">todo</span> <span class="hps">alrededor de un elemento</span><span>, utilice la </span><span class="hps">propiedad</span></span><span lang="es"><span> </span><span class="hps atn">{</span><span class="atn">{</span><span>cssxref</span> <span class="hps atn">(</span><span class="hps atn">"border</span><span>")}</span><span>}</span> <span class="hps">.</span> <span class="hps">Especifique</span> <span class="hps">el ancho</span> <span class="hps">(por lo general</span> <span class="hps">en píxeles</span> <span class="hps">para la visualización</span> <span class="hps">en una pantalla</span><span>)</span><span>, el estilo</span><span>, y el color</span><span>.</span><br>
+ <br>
+ <span class="hps">Los estilos son</span><span>:</span></span></p>
+
+<table style="margin-left: 2em;">
+ <tbody>
+  <tr>
+   <td style="width: 6em;">
+    <div style="border: 2px solid #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>solid</code></div>
+   </td>
+   <td style="width: 6em;">
+    <div style="border: 2px dotted #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dotted</code></div>
+   </td>
+   <td style="width: 6em;">
+    <div style="border: 2px dashed #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dashed</code></div>
+   </td>
+   <td style="width: 6em;">
+    <div style="border: 4px double #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>double</code></div>
+   </td>
+  </tr>
+  <tr>
+   <td style="width: 6em;">
+    <div style="border: 2px inset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>inset</code></div>
+   </td>
+   <td style="width: 6em;">
+    <div style="border: 2px outset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>outset</code></div>
+   </td>
+   <td style="width: 6em;">
+    <div style="border: 4px ridge #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>ridge</code></div>
+   </td>
+   <td style="width: 6em;">
+    <div style="border: 4px groove #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>groove</code></div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><span id="result_box" lang="es"><span class="hps">También puede establecer</span> <span class="hps">el estilo a </span></span><em><strong><code>none</code> </strong>(</em><span lang="es"><em> </em><span class="hps">ninguno) o</span> </span><strong><em><code>hidden</code> </em></strong><span lang="es"><span class="hps alt-edited">(oculto), </span> <span class="hps">para eliminar</span> <span class="hps">explícitamente</span> <span class="hps">la frontera <code>(</code></span></span><code><em><strong>border </strong></em>)</code><span lang="es"><span>,</span> <span class="hps">o</span> <span class="hps">establecer el color</span> como <span class="hps">transparente</span> <span class="hps">para hacer</span> <span class="hps">la frontera</span> <span class="hps">invisible</span> <span class="hps">sin cambiar</span> <span class="hps">el diseño.</span></span></p>
+
+<p><span id="result_box" lang="es"><span class="hps">Para especificar</span> <span class="hps alt-edited">los bordes</span> <span class="hps">de uno en uno</span> por separado<span>, utilice las propiedades</span><span>:</span> <span class="hps atn">{</span><span class="atn">{</span><span>cssxref</span> <span class="hps atn">(</span><span class="hps atn">"</span><span>border-top</span><span>")}</span><span class="atn">}, {</span><span class="atn">{</span><span>cssxref</span> <span class="hps atn">(</span><span class="hps atn">"</span><span>border-right</span><span>")}</span><span class="atn">}, {</span><span class="atn">{</span><span>cssxref</span> <span class="hps atn">(</span><span class="hps atn">"</span><span>border-bottom</span><span>")}</span> <span class="hps atn">}, {</span><span class="atn">{</span><span>cssxref</span> <span class="hps atn">(</span><span class="hps atn">"</span><span>border-left</span><span>")}</span><span>}</span><span>.</span> <span class="hps">Usted</span> <span class="hps">puede utilizar estas para</span> <span class="hps">especificar</span> <span class="hps alt-edited">un borde</span> <span class="hps"> solo en un lado</span><span>,</span> <span class="hps">o</span> <span class="hps">diferentes</span> <span class="hps alt-edited">los bordes</span> <span class="hps">en diferentes lados</span><span>.</span></span></p>
+
+<div class="tuto_example">
+<div class="tuto_type"><span id="result_box" lang="es"><span class="hps">Ejemplo</span></span></div>
+
+<p><br>
+ <span id="result_box" lang="es"><span class="hps">Esta norma</span> <span class="hps">establece el</span> <span class="hps">color de fondo y</span> <span class="hps">el borde superior</span> <span class="hps">de los elementos de</span> <span class="hps">la etiqueta <code><strong><em>h3</em></strong></code></span><span>:</span></span></p>
+
+<pre class="brush:css">h3 {
+  border-top: 4px solid #7c7; /* mid green */
+  background-color: #efe;     /* pale green */
+  color: #050;                /* dark green */
+  }
+</pre>
+
+<p><span class="short_text" id="result_box" lang="es"><span class="hps">El resultado</span> <span class="hps">se ve así:</span></span></p>
+
+<table>
+ <tbody>
+  <tr>
+   <td>
+    <p style="font-size: 133%; font-weight: bold; background-color: #efe; border-top: 4px solid #7c7; color: #050; padding-right: 6em;">Stylish heading</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><span id="result_box" lang="es"><span class="hps">Esta regla</span> <span class="hps">hace que</span> <span class="hps">las imágenes</span> sean <span class="hps">fáciles de ver</span><span>, dándoles</span> <span class="hps">un borde</span> <span class="hps">gris medio</span> a <span class="hps">todo</span><span>:</span></span></p>
+
+<pre class="brush:css">img {border: 2px solid #ccc;}
+</pre>
+
+<p><span class="short_text" id="result_box" lang="es"><span class="hps">El resultado</span> <span class="hps">se ve así:</span></span></p>
+
+<table>
+ <tbody>
+  <tr>
+   <td>Image:</td>
+   <td style="border: 2px solid #ccc;"><img alt="Image:Blue-rule.png" class="internal" src="/@api/deki/files/47/=Blue-rule.png"></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Márgenes_y_relleno"><span id="result_box" lang="es"><span class="hps">Márgenes y</span> <span class="hps">relleno</span></span></h3>
+
+<p><br>
+ <span id="result_box" lang="es"><span class="hps">Use</span>  <span class="hps">márgenes y el relleno</span> <span class="hps">para ajustar</span> <span class="hps">las posiciones de</span> <span class="hps">los elementos</span> <span class="hps atn">'</span><span>y crear</span> <span class="hps">el espacio</span> <span class="hps">que les rodea.</span><br>
+ <br>
+ <span class="hps">Utilice la propiedad </span></span><span lang="es"><span class="hps"> </span><span class="hps atn">{</span><span class="atn">{</span><span>cssxref</span> <span class="hps atn">(</span><span class="hps">"</span></span>margin<span lang="es"><span>")}</span><span>}</span> <span class="hps">o</span> la <span class="hps">propiedad </span><span class="hps atn">{</span><span class="atn">{</span><span>cssxref</span> <span class="hps atn">(</span><span class="hps">"</span></span>padding<span lang="es"><span>")}</span><span>}</span> <span class="hps">para establecer</span> <span class="hps">los</span> <span class="hps">márgenes y el </span><span class="hps"> relleno</span> con sus <span class="hps">anchuras</span> <span class="hps">respectivamente.</span><br>
+ <br>
+ <span class="hps">Si especifica</span> <span class="hps">una</span> <span class="hps">anchura,</span> <span class="hps">que se aplica</span> <span class="hps">en todo el</span> <span class="hps">elemento</span> <span class="hps">(arriba</span><span>, derecha,</span> <span class="hps">abajo y de izquierda</span><span>)</span><span>.</span><br>
+ <br>
+ <span class="hps">Si especifica</span> <span class="hps">dos anchos</span><span>,</span> <span class="hps">la</span> <span class="hps">primera se aplica</span> <span class="hps">a la</span> <span class="hps">parte superior e inferior</span><span>,</span> <span class="hps">la segunda a la</span> <span class="hps">derecha y la izquierda</span><span>.</span><br>
+ <br>
+ <span class="hps">Puede especificar</span> <span class="hps">los cuatro</span> <span class="hps">anchos</span> <span class="hps">en el orden</span><span>:</span> <span class="hps">arriba, derecha</span><span>,</span> <span class="hps">abajo, de izquierda</span><span>.</span></span></p>
+
+<div class="tuto_example">
+<div class="tuto_type"><span id="result_box" lang="es"><span class="hps">Ejemplo</span></span></div>
+
+<p><br>
+ <span id="result_box" lang="es"><span class="hps">Esta norma</span> <span class="hps">delimita</span> <span class="hps">párrafos con</span> <span class="hps">la  </span></span><code><em><strong> class</strong></em></code> <code>remark</code><span lang="es"><span>, dándoles</span> <span class="hps">un borde rojo</span> <span class="hps">a su alrededor.</span><br>
+ <br>
+ <span class="hps">El </span></span><code><strong><em>padding </em></strong></code>(relleno)<code><strong><em> </em></strong></code><span lang="es"><span class="hps">separa </span></span><span lang="es"><span class="hps">un poco </span></span><span lang="es"><span class="hps">todo</span> <span class="hps"> el borde</span> <span class="hps">del texto</span> <span class="hps">.</span></span><br>
+ <br>
+ <span id="result_box" lang="es"><span class="hps">A</span> <span class="hps">la izquierda una </span> <span class="hps alt-edited">sangría</span> <span class="hps alt-edited">desde el margen</span> <span class="hps">del</span> <span class="hps">párrafo con respecto al</span> <span class="hps">resto del texto <code><em><strong>(</strong></em></code></span></span><code><em><strong>margin-left</strong></em></code><span lang="es"><span><code><em><strong> )</strong></em></code>:</span></span></p>
+
+<pre class="brush:css">p.remark {
+  border: 2px solid red;
+  padding: 4px;
+  margin-left: 24px;
+  }
+</pre>
+
+<p><span class="short_text" id="result_box" lang="es"><span class="hps">El resultado</span> <span class="hps">se ve así:</span></span></p>
+
+<table>
+ <tbody>
+  <tr>
+   <td>
+    <p><span class="short_text" id="result_box" lang="es"><span class="hps alt-edited">A continuación</span> <span class="hps">es un párrafo</span> <span class="hps">normal.</span></span></p>
+
+    <p style="border: 2px solid red; padding: 4px 6em 4px 4px; margin: 0px 0px 0px 24px;">Aqui con la clase remark.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type"><span id="result_box" lang="es"><span class="hps">Más</span> <span class="hps">detalles</span></span></div>
+
+<p><span id="result_box" lang="es"><span class="hps">Cuando se utiliza</span> <span class="hps">márgenes y el relleno</span> <span class="hps">para ajustar</span> <span class="hps alt-edited">la manera en</span> <span class="hps alt-edited">que los elementos</span> <span class="hps">se disponen</span><span>,</span> <span class="hps">sus</span> <span class="hps">reglas de estilo</span> <span class="hps">interactúan</span> <span class="hps alt-edited">con los estilos</span> <span class="hps">de tu navegador</span> <span class="hps alt-edited">por defecto</span> <span class="hps alt-edited">y pueden ser</span> <span class="hps alt-edited">muy complejas.</span><br>
+ <br>
+ <span class="hps">Los distintos navegadores</span> <span class="hps">ponen</span> <span class="hps alt-edited">que los elementos</span> <span class="hps">de manera diferente</span><span>.</span> <span class="hps">Los</span> <span class="hps alt-edited">resultados pueden</span> <span class="hps">ser similar</span> <span class="hps alt-edited">,hasta que nuestro</span> <span class="hps alt-edited">hoja de estilos</span> <span class="hps">cambia las cosas</span><span>.</span> <span class="hps">A veces esto</span> <span class="hps">puede hacer que sus</span> <span class="hps">hojas de estilo</span> <span class="hps alt-edited">den</span> <span class="hps">resultados sorprendentes.</span><br>
+ <br>
+ <span class="hps">Para</span> <span class="hps">obtener</span> <span class="hps">el resultado deseado</span><span>, es posible que</span> <span class="hps">tenga que cambiar</span> <span class="hps alt-edited">el marcado</span> <span class="hps">de su</span> <span class="hps">documento.</span> <span class="hps">La</span> <span class="hps">página siguiente de</span> <span class="hps">este tutorial</span> <span class="hps">tiene más</span> <span class="hps">información al respecto.</span><br>
+ <br>
+ <span class="hps">Para obtener información</span> <span class="hps">detallada acerca</span> <span class="hps">de relleno</span><span>, márgenes</span> <span class="hps">y bordes</span><span>, consulte</span> <span class="hps">la página de referencia</span> <span class="hps">Modelo de caja</span><span>.</span></span></p>
+</div>
+
+<h2 id="Acción_Agregar_bordes"><span id="result_box" lang="es"><span class="hps">Acción</span><span>:</span> <span class="hps">Agregar bordes</span></span></h2>
+
+<p>Edite su archivo CSS , <strong><em>style2.css</em></strong>. <span id="result_box" lang="es"><span class="hps alt-edited">Agrega</span> <span class="hps">esta regla</span> <span class="hps">para dibujar una línea</span> <span class="hps">a través de la</span> <span class="hps">página</span> <span class="hps">sobre cada</span> <span class="hps alt-edited">encabezado</span><span>:</span></span></p>
+
+<pre class="brush:css">h3 {border-top: 1px solid gray;}
+</pre>
+
+<p><span id="result_box" lang="es"><span class="hps">Si usted tomó</span> <span class="hps alt-edited">el cambio </span><span class="hps alt-edited">en la última página</span><span>,</span> <span class="hps alt-edited">modificara la regla</span> <span class="hps">que ha creado,</span> <span class="hps">de lo contrario</span> <span class="hps alt-edited">agregar la</span> <span class="hps alt-edited">nueva regla</span> <span class="hps alt-edited">para añadir espacio</span> <span class="hps">debajo de cada</span> <span class="hps alt-edited">ítem de la lista</span><span>:</span></span></p>
+
+<pre class="brush:css">li {
+  list-style: lower-roman;
+  margin-bottom: 8px;
+  }
+</pre>
+
+<p><span class="short_text" id="result_box" lang="es"><span class="hps">Actualice el navegador</span> <span class="hps">para ver el resultado</span><span>:</span></span></p>
+
+<table style="border: 2px outset #36b; padding: 1em; background-color: white;">
+ <tbody>
+  <tr>
+   <td>
+    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p>
+
+    <ul style="">
+     <li style="margin-bottom: 8px;">Arctic</li>
+     <li style="margin-bottom: 8px;">Atlantic</li>
+     <li style="margin-bottom: 8px;">Pacific</li>
+     <li style="margin-bottom: 8px;">Indian</li>
+     <li style="margin-bottom: 8px;">Southern</li>
+    </ul>
+
+    <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Numbered paragraphs</p>
+
+    <p><strong>1: </strong>Lorem ipsum</p>
+
+    <p><strong>2: </strong>Dolor sit</p>
+
+    <p><strong>3: </strong>Amet consectetuer</p>
+
+    <p><strong>4: </strong>Magna aliquam</p>
+
+    <p><strong>5: </strong>Autem veleum</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="tuto_example">
+<div class="tuto_type"><span id="result_box" lang="es"><span class="hps alt-edited">El reto</span></span></div>
+
+<p><br>
+ <span id="result_box" lang="es"><span class="hps alt-edited">Agrega</span> <span class="hps">una regla a</span> <span class="hps">la hoja de estilos</span><span>, para que</span> <span class="hps alt-edited">aparesca un amplio</span> <span class="hps alt-edited">borde</span> <span class="hps">alrededor de los</span> <span class="hps alt-edited">la lista de océanos, en</span> <span class="hps">un color</span> <span class="hps">que le recuerda</span> <span class="hps">al mar</span><span>, algo</span> <span class="hps">como esto:</span></span></p>
+
+<table style="border: 2px outset #36b; padding: 1em; background-color: white;">
+ <tbody>
+  <tr>
+   <td>
+    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p>
+
+    <div style="border: 12px solid #69b; padding-left: 1em;">
+    <ul style="">
+     <li style="margin-bottom: 8px;">Arctic</li>
+     <li style="margin-bottom: 8px;">Atlantic</li>
+     <li style="margin-bottom: 8px;">Pacific</li>
+     <li style="margin-bottom: 8px;">Indian</li>
+     <li style="margin-bottom: 8px;">Southern</li>
+    </ul>
+    </div>
+
+    <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Numbered paragraphs</p>
+
+    <p><strong>. . .</strong></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<p><span id="result_box" lang="es"><span class="hps atn">(</span><span>No es necesario</span> <span class="hps alt-edited">que coincida con</span> <span class="hps">el ancho</span> <span class="hps">y el color</span> <span class="hps">que se ve aquí</span> <span class="hps">exactamente</span><span>.</span><span>)</span></span></p>
+</div>
+
+<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Boxes">Ver una solución a este desafío.</a></p>
+
+<h2 id="What_next">What next?</h2>
+
+<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Layout", "Layout") }}<span id="result_box" lang="es"><span class="hps">Al especificar</span> <span class="hps">márgenes y el relleno</span><span>, se</span> <span class="hps">modificó el</span> <span class="hps">diseño del documento</span><span>.</span> <span class="hps">En la página siguiente</span> <span class="hps">se cambia</span> el </span><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Layout" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Layout">layout</a><span id="result_box" lang="es"><span class="hps"> de su</span> <span class="hps">documento</span> <span class="hps">de otra manera.</span></span></p>