Here is the code snippet in question:
<div id="x">
<div id="modal-body">
<div class="modal-input-row">
xxx
</div>
</div>
</div>
#modal-body {
display: block;
margin-top: 5rem;
}
.modal-input-row {
margin-top: 2rem;
overflow: hidden;
display: block;
}
Upon inspecting with Google Chrome developer tools, I noticed the following:
- The top area of modal-body begins 5rem below the #x
<div> - The top area of modal-input-row also starts 5rem below the #x
<div>
One might expect that since modal-input-row is inside modal-body, it would start 7rem below the #x <div>. So why does this not happen as expected?