Skip to main content

--description--

An element's margin controls the amount of space between an element's border and surrounding elements.

If you set an element's margin to a negative value, the element will grow larger.

--instructions--

Try to set the margin to a negative value like the one for the red box.

Change the margin of the blue box to -15px, so it fills the entire horizontal width of the yellow box around it.

--hints--

Your blue-box class should give elements -15px of margin.

assert($('.blue-box').css('margin-top') === '-15px');

--seed--

--seed-contents--

<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;
margin: -15px;
}

.blue-box {
background-color: blue;
color: #fff;
padding: 20px;
margin: 20px;
}
</style>

<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box blue-box">padding</h5>
</div>

--solutions--

<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;
margin: -15px;
}

.blue-box {
background-color: blue;
color: #fff;
padding: 20px;
margin: 20px;
margin-top: -15px;
}
</style>

<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box blue-box">padding</h5>
</div>