CODEWITHSUNDEEP
css
handsome
handsome

Reputation: 2402

adding margin bottom to a div

im trying to add margin-bottom to a div (div.bar) but is breaking the parent div

in this fiddle you can check what im saying.

http://jsfiddle.net/dmsf/2JggY/

but if you add a 1px border to the foo div

.foo {
    background-color:#FFF;
    border: 1px solid;
    margin: 10px;
}

it will work as expected.

it is possible to make it work without the 1px border?

Upvotes: 0

Views: 215

Answers (2)

davidpett
davidpett

Reputation: 96

It is a case of collapsing margins (http://reference.sitepoint.com/css/collapsingmargins), there are a few ways to fix this, one is to use padding inside of elements. Taking your example and use padding-bottom on .foo instead of a margin bottom on .bar http://jsfiddle.net/davidpett/g2CzH/

.foo {
    background-color:#FFF;
    margin: 10px;
    padding-bottom: 50px;
}

.bar {
    height:100px;
    background-color:#333;
}

Upvotes: 0

isherwood
isherwood

Reputation: 61063

Set {overflow: hidden} or {overflow: auto} on the parent.

http://jsfiddle.net/2JggY/1/

.foo {
    overflow: auto
}

Upvotes: 2

Related Questions