Question

css/hmtl newbie here. I’ve been messing with divs and I’m getting some odd behavior that I can’t figure out/explain. I’m getting extra space below the ‘more’ link, when it should be centered on the y-axis.

This is the code:

#show-rec-box {
    clear: both;
    width: 100%;
    height: 286px;
    border-bottom: 1px solid #ececec;  

}

but when I change it to this, the extra space disappears!

#show-rec-box {
    clear: both;
    width: 100%;
    height: 286px;
    border-bottom: 1px solid #ececec; 
    border: 1px solid #911; 
}

entire code w/o extra border: http://jsfiddle.net/8q3Ca/
code with extra border: http://jsfiddle.net/8q3Ca/1/
any ideas what’s happening?? thanks a lot!

Answer 1

You have margin-top on #rec-title. It’s margin collapse – http://www.w3.org/TR/CSS2/box.html#collapsing-margins Try use ‘overflow:auto’ for a parent block . Similar question Child elements with margins within DIVs

http://jsfiddle.net/fliptheweb/8q3Ca/2/