Search code examples
cssgoogle-chromesafaripadding

Extra padding on Chrome/Safari/Webkit -- any ideas?

My page has this extra padding on the top of page that I'm unable to remove. Tried everything under the sun and hope someone can show me the way.

Any ideas?

Solution

  • Your page has an element near the top with a top-margin that extends outside your page wrapper. If you have this:

    <div class="wrapper" style="margin: 0">
  <div class="section" style="margin: 40px 0"> Stuff! </div>
</div>

    Then the .section element will be positioned at the top of the .wrapper and its 40px margin will extend out the top. This has to do with the way margins collapse together so that two margins between elements don't accumulate. You can prevent this by adding overflow: hidden on the wrapper.

    In your markup, it's the .mini-search element that has a 40px top margin. Either remove this margin, or add overflow: hidden on the fieldset that contains it.