css margin problem

Question

My css looks like this

* {
     margin: 0;
     padding: 0;
}
body {
    background-color: #FFFFFF;
}
div#header {
    background-color: #969696;
    height: 80px;
}
div#mid-bar {
    background: url(images/home.jpg) left no-repeat #6f6565;
    height: 200px;
}

#searchbox {
    background-color: #c1c1c1;
    width: 200px;
    height: 180px;
    margin: 10px 20px 10px 350px;
}

and my html

    <div id="header">

    </div>
    <div id="mid-bar">
        <div id="searchbox">

        </div>
    </div>

you can see the problem. the space between header and mid-bar which is created due to the margin given in the searchbox div. i want this margin for searchbox within the mid-bar div... and not from header div.

Answer 1

Give padding to #mid-bar instead of searchbox margin

Answer 2

I's a known bug: would use padding instead of margin. so:

div#mid-bar {
    background: url(images/home.jpg) left no-repeat #6f6565;
    height: 200px;
padding-top: 10px;
}


#searchbox {
    background-color: #c1c1c1;
    width: 200px;
    height: 180px;
    margin: 0px 20px 10px 350px;
}

Answer 3

I have seen this happen when you don't give margins to parents and the first element, even a child that you give margin to, causes gaps in the parents by creating margins. One way I've overcome this is by using paddings on the parent containers instead of margins.

See your example here with paddings: http://jsbin.com/ememi3

Answer 4

If you are intent on using margins, try setting margin:0; in #mid-bar. Otherwise give #mid-bar a padding-top:10px; and remove top margin from #searchbox.

Answer 5

Everyone seems to agree on this one, padding will work much better then margins will. I looked into it a little and it seems Pixeline is right, it's a known bug in Firefox, hopefully they will fix it in 4.