Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

margin-top not working as expected without padding on surrounding div

margin-top not working as expected without padding on surrounding div

Problem

I have an image in a div inside of a Container Div. When I apply a margin-top to the image the margin gets applied outside of the container div (pushing the container) down in relation to the body.

I can "fix" this by applying a Padding onto the other div... but I'd rather have a margin on my image. If I apply even a 1px padding onto the other (not container) div then the margin-top works as expected in pushing the image down.

CSS:

body {
    background: #bada44
}
.container {
    background: #776;
}
.other {
    background: #ccc;
    /*padding: 1px;*/
}
img {
    width: 33%;
    display: block;
    margin: 0 auto;
    margin-top: 30px;
}

HTML

jsFiddle: http://jsfiddle.net/mguQY/1/

I'm using Chrome

Problem courtesy of: mazlix

Solution

Déjà vu :D Add overflow: hidden; to .other :

.other {
    background: #ccc;
    /*padding: 1px;*/
    overflow: hidden;
}

http://jsfiddle.net/mguQY/2/

Solution courtesy of: Kaloyan

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

margin-top not working as expected without padding on surrounding div

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×