2.3 KiB
2.3 KiB
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 |
Description
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. Instructions
padding
de su caja azul para que coincida con el de su caja roja. Tests
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>
Solution
// solution required