freeCodeCamp/curriculum/challenges/spanish/01-responsive-web-design/basic-css/add-a-negative-margin-to-an-element.spanish.md

id	title	localeTitle	challengeType	guideUrl	videoUrl
bad87fee1348bd9aedf08823	Add a Negative Margin to an Element	Agregar un margen negativo a un elemento	0	https://spanish.freecodecamp.org/guide/certificates/add-a-negative-margin-to-an-element

Description

El margin un elemento controla la cantidad de espacio entre el border un elemento y los elementos circundantes. Si establece el margin un elemento en un valor negativo, el elemento aumentará de tamaño.

Instructions

Intente establecer el margin en un valor negativo como el del cuadro rojo. Cambie el margin del cuadro azul a -15px , para que llene todo el ancho horizontal del cuadro amarillo que lo rodea.

Tests

tests:
  - text: Tu clase de <code>blue-box</code> debe dar elementos <code>-15px</code> de <code>margin</code> .
    testString: 'assert($(".blue-box").css("margin-top") === "-15px", "Your <code>blue-box</code> class should give elements <code>-15px</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: -15px;
  }

  .blue-box {
    background-color: blue;
    color: #fff;
    padding: 20px;
    margin: 20px;
  }
</style>

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

Solution

// solution required