Javascript html标记上的随机边距顶部_Javascript_Html_Css_Wordpress_Debugging

Javascript html标记上的随机边距顶部

javascript html css wordpress debugging

Javascript html标记上的随机边距顶部,javascript,html,css,wordpress,debugging,Javascript,Html,Css,Wordpress,Debugging,我正在制作一个wordpress主题，我的html标签上有一个随机的页边空白。我已经指定在css重置的html元素上没有填充或空白。不知道为什么会这样这就是我在Chrome on dev tools中检查元素时得到的结果 html { margin-top: 32px !important; } 以下是html： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-T

我正在制作一个wordpress主题，我的html标签上有一个随机的页边空白。我已经指定在css重置的html元素上没有填充或空白。不知道为什么会这样

这就是我在Chrome on dev tools中检查元素时得到的结果

html {
margin-top: 32px !important;
}

以下是html：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale = 1.0">
        <title>
            <?php
            wp_title( '-', true, 'right' );
            bloginfo ( 'name' );
            ?>
        </title>

        <link href='http://fonts.googleapis.com/css?family=Arvo:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>

    <?php wp_head(); ?>

    </head>

    <header>
        <div class="main-wrapper">
            <section class="logo">
                <a href="index.html"><img src="<?php bloginfo( 'template_directory' );?>/images/youthspeak-logo.png" alt=""/></a>
            </section>

            <nav class="main-nav">
                <?php

                $args = array(
                    'menu' => 'main-menu'
                );

                wp_nav_menu( $args );

                ?>
            </nav><!--- Close Nav -->

            <section class="search-bar">
                <form class="subscribe-email">
                    <input class="input" type="email" name="email" placeholder="Search Videos">
                </form>
            </section><!--- end search-bar -->

            <div class="cb"></div>
        </div><!--- End main-wrapper -->
    </header>

如果这是您的确切代码，请使用“}”正确结束重置样式块

这是WordPress添加的，以便在您登录时为管理员工具栏腾出空间。您可以在用户配置文件设置中禁用工具栏

你能分享一个小提琴，或者最坏的情况下，一个链接吗？什么标记是

，它可能包含边距/填充？为什么在结束

标记后没有

标记？是否有正文标记？至少在没有php的情况下，您可以提供静态html。如果不看示例，请检查间隙是否确实来自html标记，或者，如果它是另一个元素的边距或填充，则会将页面向下推。它可能是靠近顶部的元素之一，或者是包装器/容器div。另外，为了帮助排除故障，请删除html和body标记中的所有样式，并将border、margin和padding设置为0，以查看间隙是否消失。是的，就是这样！非常感谢。

    /* CSS Document */


    /* CSS RESET */
    /* http://meyerweb.com/eric/tools/css/reset/ */
    /* v1.0 | 20080212 */

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
        a, abbr, acronym, address, big, cite, code,
        del, dfn, em, font, img, ins, kbd, q, s, samp,
        small, strike, strong, sub, sup, tt, var,
        b, u, i, center,
        dl, dt, dd, ol, ul, li,
        fieldset, form, label, legend,
        table, caption, tbody, tfoot, thead, tr, th, td {
            margin: 0;
            padding: 0;
            border: 0;
            outline: 0;
            font-size: 100%;
            vertical-align: baseline;
            background: transparent;
}
    .main-wrapper {
        margin: 0 auto;
        width: 1000px;
    }

    .logo {
        float: left;
        padding: 12px 23px;
        background:#3498DB;
    }


    header {
        background: #2E2E2E;
        height: 69px;
        border-bottom: 3px solid #3498DB;
    }

/* CSS Document */


/* CSS RESET */
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
}