CODEWITHSUNDEEP
csshtml
Seven of Nine
Seven of Nine

Reputation: 67

Gap between divs w/ padding 0?

I've been searching around for a while (for the answer) with no success, so I guess I did "my homework"...

So basically I've a gap between 2 divs. You can see it here.

Upvotes: 0

Views: 100

Answers (5)

cstrat
cstrat

Reputation: 1047

The gap is caused by the p element.
You need to take the margins off - browsers default behaviour is to add 1em before and after the paragraph.

If you use google chrome, you can right click and goto inspect element. From there you can see what default behaviours have been applied to certain elements on the page. You can even see visually what space has been created by margins. Your gap was one of them. =)

See screenshot below - this is showing the margin applied to another p element.

Upvotes: 2

sandeep
sandeep

Reputation: 92813

Give overflow:hidden to your .bigtext, like this:

.bigtext{
 overflow:hidden;
}

This problem is called "collapsing margins".

Check this http://reference.sitepoint.com/css/collapsingmargins

http://www.w3.org/TR/CSS2/box.html

Upvotes: 2

Dev
Dev

Reputation: 791

on your content class 

.content {
  background: url("panel.png");
  padding: 0;
  margin: 0;
  float: left; /*new style*/
  width: 100%; /*new style*/
}

Upvotes: 2

Jamie
Jamie

Reputation: 189

you can hack it by applying margin-top:-23px to the .content div

Upvotes: 0

Ahmed Nuaman
Ahmed Nuaman

Reputation: 13251

Try margin: 0; for those divs.

Upvotes: 0

Related Questions