I recently attempted to center the inner box within the outer box in this codepen. To achieve this, I utilized a workaround by applying margin-bottom: 20px;.
However, it appears that this approach did not generate any visible space between the bottom line of the inner div and the border of the outer div.
Below is the snippet of code used:
body {
margin: 0px;
background-color: #eee;
}
.content {
width: 770px;
margin: auto;
}
.outer {
width: 100%;
margin: auto;
background-color: #aaa;
}
.inner {
background-color: #ccc;
width: 80%;
text-align: center;
padding: 5%;
margin-left: 1px;
margin-top: 10px;
margin-bottom: 20px;
border-radius: 25px;
}<div class="content">
<div class="outer">
Outer div
<div class="inner">
Inner div 1
</div>
</div>
</div>