freeCodeCamp/adjust-the-padding-of-an-element.spanish.md at 7872dda58bd93868edab37e948fdf33fb8c37112

Files

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.3 KiB

Raw Blame History

id, title, challengeType, guideUrl, videoUrl, localeTitle

id	title	challengeType	guideUrl	videoUrl	localeTitle
bad88fee1348bd9aedf08825	Adjust the Padding of an Element	0	https://spanish.freecodecamp.org/guide/certificates/adjust-the-padding-of-an-element		Ajustar el relleno de un elemento

Descripción

Ahora vamos a guardar nuestra aplicación Cat Photo por un tiempo y aprender más sobre el estilo de HTML. Es posible que ya hayas notado esto, pero todos los elementos HTML son esencialmente pequeños rectángulos. Tres propiedades importantes controlan el espacio que rodea a cada elemento HTML: padding , margin y border . El padding un elemento controla la cantidad de espacio entre el contenido del elemento y su border . 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 más padding que el cuadro azul. Cuando aumente el padding del cuadro azul, aumentará la distancia ( padding ) entre el texto y el borde que lo rodea.

Instrucciones

Cambie el padding de su caja azul para que coincida con el de su caja roja.

Pruebas

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

  .blue-box {
    background-color: blue;
    color: #fff;
    padding: 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

2.3 KiB Raw Blame History