freeCodeCamp/add-different-padding-to-each-side-of-an-element.spanish.md at dbae7c6d24fe96f4dfa8c062f23c830f77e77ea0

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

3.0 KiB

Raw Blame History

id, title, challengeType, guideUrl, videoUrl, localeTitle

id	title	challengeType	guideUrl	videoUrl	localeTitle
bad87fee1348bd9aedf08824	Add Different Padding to Each Side of an Element	0	https://spanish.freecodecamp.org/guide/certificates/add-different-padding-to-each-side-of-an-element		Añadir diferente relleno a cada lado de un elemento

Descripción

A veces querrá personalizar un elemento para que tenga diferentes cantidades de padding en cada uno de sus lados. CSS le permite controlar el padding de los cuatro lados individuales de un elemento con las propiedades padding-top , padding-right , padding-bottom y padding-left .

Instrucciones

Dale a la caja azul un padding de 40px en su lado superior e izquierdo, pero solo 20px en su lado inferior y derecho.

Pruebas

tests:
  - text: Su clase de <code>blue-box</code> debe dar a la parte superior de los elementos <code>40px</code> de <code>padding</code> .
    testString: 'assert($(".blue-box").css("padding-top") === "40px", "Your <code>blue-box</code> class should give the top of the elements <code>40px</code> of <code>padding</code>.");'
  - text: Su clase de <code>blue-box</code> debe otorgar el derecho de los elementos <code>20px</code> de <code>padding</code> .
    testString: 'assert($(".blue-box").css("padding-right") === "20px", "Your <code>blue-box</code> class should give the right of the elements <code>20px</code> of <code>padding</code>.");'
  - text: Su clase de <code>blue-box</code> debe dar al fondo de los elementos <code>20px</code> de <code>padding</code> .
    testString: 'assert($(".blue-box").css("padding-bottom") === "20px", "Your <code>blue-box</code> class should give the bottom of the elements <code>20px</code> of <code>padding</code>.");'
  - text: Su clase de <code>blue-box</code> debe dar a la izquierda de los elementos <code>40px</code> de <code>padding</code> .
    testString: 'assert($(".blue-box").css("padding-left") === "40px", "Your <code>blue-box</code> class should give the left of the elements <code>40px</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-top: 40px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 40px;
  }

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

3.0 KiB Raw Blame History