31 posts
  • Has been part of the Envato Community for over 6 years
  • Has collected 100+ items on Envato Market
blingcart says

Anyone know why i get 16px of pixels over and under my content div? It has 0 on both margin and padding top/bottom.

I have my site setup like this

CONTAINER DIV

TOP HEADER DIV
NAVIGATION DIV
CONTENT DIV <content is the only one showing 16px on top and 16px on bottom like the image shown below.

FOOTER DIV

END CONTAINER DIV

http://i.imgur.com/24TrI0a.png #content { width: 1070px; padding-right: 15px; padding-left: 15px; font-family: 'Open Sans', sans-serif; background-color: #FFF; padding-top: 0px; padding-bottom: 0px; margin: 0px; }
1485 posts
  • Has referred 1+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Made it to the Authors' Hall of Fame
+3 more
OriginalEXE says

Would have to see page to debug the problem.

My guess is that one of the inner elements has margin top/bottom applied and that’s causing this distance.

P.S for padding use shorthand property instead:
padding: 0 15px;
7647 posts
  • Has been part of the Envato Community for over 5 years
  • Has sold $40,000+ on Envato Market
  • Sells items exclusively on Envato Market
  • Located in Europe
+5 more
doru says

try like this

padding: 0px 15px;

maybe it will work

31 posts
  • Has been part of the Envato Community for over 6 years
  • Has collected 100+ items on Envato Market
blingcart says

This is my site:

goo.gl/fuPHw

31 posts
  • Has been part of the Envato Community for over 6 years
  • Has collected 100+ items on Envato Market
blingcart says

If I add -16px to both margin top and bottom on the content css it fixes this but i just don’t want to do it that way. I feel like I did something wrong.

1034 posts
  • Has sold $100+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
+2 more
BenSheppard says

Boom thought so, well thought it’d be a header, but the P tag has margin 1em top and bottom, that’s what’s causing the issue

1485 posts
  • Has referred 1+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Made it to the Authors' Hall of Fame
+3 more
OriginalEXE says

Try like this:

#content {
padding: 1px 15px;
}
7647 posts
  • Has been part of the Envato Community for over 5 years
  • Has sold $40,000+ on Envato Market
  • Sells items exclusively on Envato Market
  • Located in Europe
+5 more
doru says

is the padding (or margin not sure) of the first paragraph (and the last one respectively)

31 posts
  • Has been part of the Envato Community for over 6 years
  • Has collected 100+ items on Envato Market
blingcart says

Boom thought so, well thought it’d be a header, but the P tag has margin 1em top and bottom, that’s what’s causing the issue

I removed the p tags from the sample content and it fixed it lol. Any recommendations u have for the current setup? This is the first design I am working on.

31 posts
  • Has been part of the Envato Community for over 6 years
  • Has collected 100+ items on Envato Market
blingcart says

is the padding (or margin not sure) of the first paragraph (and the last one respectively)

thanks i removed the p tags and it looks good now. Any way to fix the p tag error or do I just not start off with a p and maybe start filling up the content with divs?

by
by
by
by
by
by