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

前端 未结 9 2212
广开言路
广开言路 2021-02-07 05:35

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?

相关标签:
9条回答
  • 2021-02-07 06:01

    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.

    0 讨论(0)
  • 2021-02-07 06:01

    Always include the YUI reset css file.

    and: body, html {padding: 0; margin:0} that's it!

    0 讨论(0)
  • 2021-02-07 06:03

    It is, in my opinion, caused by an EMBED element added by some plugin just after the HTML opening tag* (check "right click > inspect element" to see if it is really there). If yes, there are basically two options to follow:

    1. disable/remove the plugin which is responsible for adding the element; (preferred, as it's global)
    2. insert embed{display:none} into your style sheet.

    *This was my case - the plugin called default plugin and both disabling & removing helped solve the issue.

    0 讨论(0)
  • 2021-02-07 06:13

    I'm able to fix it by removing the rule:

    * { padding: 0 } 
    

    From your CSS. I'm not sure what that's breaking, but that is the cause.

    0 讨论(0)
  • 2021-02-07 06:14

    i trust you have done:

    body {padding :0; margin:0}
    

    by default the body tag has padding.

    0 讨论(0)
  • 2021-02-07 06:18

    This works with IE (at least IE v10 in my tests):

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    

    The bottom one is the one that works for IE 10, just keeps all the dimensions to what you set a selector/element to be in the width and/or height.

    0 讨论(0)
提交回复
热议问题