CODEWITHSUNDEEP
htmlcssmargin
janosrusiczki
janosrusiczki

Reputation: 1931

margin-bottom property of a div's last element doesn't "extend" the div

I have an element in a div, which has a background image. Below the div I have another div with another background image. Now the problem is that if the last element contained in the first div has margin-bottom applied there will be a gap between the 2 divs like this:

Screenshot http://img40.imageshack.us/img40/5603/littlesnapperh.png

Notice the gray gap caused by the margin-bottom property of the h2 element contained within the first div. I know this can be solved if I switch margin-bottom to padding-bottom but what if I need margin-bottom?

How to fix this?

Upvotes: 5

Views: 3690

Answers (2)

RoToRa
RoToRa

Reputation: 38431

This is a feature known as collapsing margins. See: http://www.w3.org/TR/CSS2/box.html#collapsing-margins

The easiest way around (aside of replacing the margin with padding as you suggest) is to add a small (1px) invisible border or padding to the outer element.

Upvotes: 7

matpol
matpol

Reputation: 3074

Probably something to do with overflow:hidden or one of the elements not clearing properly. If add overflow:hidden to the first div it might fix it.

Upvotes: 0

Related Questions