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

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

Description

El margin es una propiedad que controla la cantidad de espacio entre el border de un elemento y los elementos circundantes. Si establece el margin 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