Kamil Solecki Kamil Solecki - 6 months ago 19
HTML Question

Margin appearing out of nowhere

While building a page, I encountered a problem i couldn't explain:


The first div in a sidebar has a weird break above


enter image description here

Second picture, showing that the top div in sidebar (template-sidebar-payment) doesn't actually contain that gap.

enter image description here

I had a margin appear from nowhere, without it being set anywhere (I've searched broad and wide).



#template-sidebar {
display: table-cell;
width: 200px;
padding-right: 15px;
height: 626px;
background: #FFF;
border-right: 7px solid #fec30d;
}
.sidebar-element {
height: 200px;
border-top: 10px solid #ffffff;
border-bottom: 10px solid #ffffff;
}
.sidebar-element hr {
border: none;
height: 1px;
color: #c6c6c6;
background-color: #c6c6c6;
/*border: 0.5px solid #c6c6c6;*/
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
}
.sidebar-element h4 {
padding-top: 10px;
}
#template-sidebar-payment {
border-top: 0;
!important
}
#template-sidebar-rules {
border-bottom: 0;
!important
}

<div id="template-sidebar">
<div id="template-sidebar-payment" class="sidebar-element">
<hr noshade/>
<h4>Sposoby płatności</h4>
</div>
<div id="template-sidebar-delivery" class="sidebar-element">
<hr noshade/>
<h4>Sposoby dostawy</h4>
</div>
<div id="template-sidebar-rules" class="sidebar-element">
<hr noshade/>
<h4>Regulamin</h4>
</div>
</div>





Please note, that the reason for making this a table-cell is because I want the sidebar to scale along the (right hand side) content as it expands in length.

As for now, I tried removing certain things, adding display: blocks etc. but nothing helped.

If any more code is needed (I guess there might be a case where te problem could lie somewhere else?) please ask in comments and I will be happy to provide.

Answer

we need live demo for inspecting this situation. but i think setting vertical align to sidebar will solve your problem.

#template-sidebar {
    vertical-align:top;
}
Comments