freeCodeCamp/use-clockwise-notation-to-specify-the-margin-of-an-element.spanish.md at 0e263c6a9c86fa3771d0f439afb51a22d3b03a89

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

Raw Blame History

id, title, challengeType, videoUrl, localeTitle

id	title	challengeType	videoUrl	localeTitle
bad87fee1348bd9afdf08726	Use Clockwise Notation to Specify the Margin of an Element	0		Usar la notación de las agujas del reloj para especificar el margen de un elemento

Descripción

Intentemos esto de nuevo, pero con margin esta vez. En lugar de especificar individualmente las propiedades margin-top , margin-right , margin-bottom y margin-left un elemento, puede especificarlas todas en una línea, como esta: margin: 10px 20px 10px 20px; Estos cuatro valores funcionan como un reloj: arriba, derecha, abajo, izquierda, y producirán exactamente el mismo resultado que utilizando las instrucciones de margen específicas para cada lado.

Instrucciones

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

  .red-box {
    background-color: crimson;
    color: #fff;
    margin: 20px 40px 20px 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.1 KiB Raw Blame History