This is the exercise:
Give the blue box a padding
of 40px
on its top and left side, but only 20px
on its bottom and right side.
and the solutions its:
<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;
padding-top: 40px;
padding-left: 40px;
padding-bottom: 20px;
padding-rigth: 20px;
}
</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>
the error sad:
Your blue-box
class should give the right of the elements 20px
of padding
.
Why???