Question

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

当我检查元素时，这就是我在开发工具中使用的Chrome。

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>

和css：

    /* 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;
    }

Answer 1

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

/* 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;
}

Answer 2

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

随机margin-top在html标签上

2 个答案: