Files
freeCodeCamp/curriculum/challenges/spanish/01-responsive-web-design/basic-css/adjust-the-margin-of-an-element.spanish.md
S.Hale 3920b7c4ce Corrected capitalization, corrected to American spellings and typos (#30685)
* Translate challenge subtitles and example challenge text to Spanish

* Corrected errors in syntax and punctuation

* Multiple corrections of it/s to its plus other grammar corrections

* Correction and added paragraph to CSS Flex article

* Corrected my own typo

* Corrected capitalization, American spellings and typos
2018-11-07 10:34:13 -05:00

2.1 KiB

id, title, challengeType, guideUrl, videoUrl, localeTitle
id title challengeType guideUrl videoUrl localeTitle
bad87fee1348bd9aedf08822 Adjust the Margin of an Element 0 https://spanish.freecodecamp.org/guide/certificates/adjust-the-margin-of-an-element Ajustar el margen de un elemento

Descripción

El margin un elemento controla la cantidad de espacio entre el border un elemento y los elementos circundantes. Aquí, podemos ver que el cuadro azul y el cuadro rojo están anidados dentro del cuadro amarillo. Tenga en cuenta que el cuadro rojo tiene un margin más margin que el cuadro azul, lo que hace que parezca más pequeño. Cuando aumente el margin del cuadro azul, aumentará la distancia entre su borde y los elementos circundantes.

Instrucciones

Cambie el margin del cuadro azul para que coincida con el del cuadro rojo.

Pruebas

tests:
  - text: Su clase de <code>blue-box</code> debe dar elementos de 20 <code>20px</code> de <code>margin</code> .
    testString: 'assert($(".blue-box").css("margin-top") === "20px", "Your <code>blue-box</code> class should give elements <code>20px</code> of <code>margin</code>.");'

Challenge Seed

<style>
  .injected-text {
    margin-bottom: -25px;
    text-align: center;
  }

  .box {
    border-style: solid;
    border-color: black;
    border-width: 5px;
    text-align: center;
  }

  .yellow-box {
    background-color: yellow;
    padding: 10px;
  }

  .red-box {
    background-color: crimson;
    color: #fff;
    padding: 20px;
    margin: 20px;
  }

  .blue-box {
    background-color: blue;
    color: #fff;
    padding: 20px;
    margin: 10px;
  }
</style>
<h5 class="injected-text">margin</h5>

<div class="box yellow-box">
  <h5 class="box red-box">padding</h5>
  <h5 class="box blue-box">padding</h5>
</div>

Solución

// solution required