CODEWITHSUNDEEP
htmlcss
Kamil Solecki
Kamil Solecki

Reputation: 1117

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.

Upvotes: 1

Views: 1637

Answers (3)

mkg
mkg

Reputation: 779

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;
}

Upvotes: 5

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

I think it's the margin from the hr. Add a margin-top: 0 to it:

#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;
    margin-top: 0;
    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>

Upvotes: 1

M. Foldager
M. Foldager

Reputation: 300

The only issue I see, is the padding-right.

Attempt altering padding-right from 15px to 5px and see if that changes anything.

EDIT: Saw your comment. See below.

It probably origins from the

.sidebar-element h4 {
    padding-top: 10px;
}

part of your style sheet.

Upvotes: 0

Related Questions