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; }
1497 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
+2 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;
7819 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
  • Has referred 10+ members
+4 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

1497 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
+2 more
OriginalEXE says

Try like this:

#content {
padding: 1px 15px;
}
7819 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
  • Has referred 10+ members
+4 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?

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by