PHP 导致页眉和横幅之间出现间隙

Question

我有一个静态主页，我想上传到 wordpress。我已经设法让网站在 html 中看起来像我想要的那样，但是每当我尝试在 wordpress 中打开它时，它都会产生巨大的差距。我不知道它是从哪里来的。我用谷歌搜索并不断听到有关使用 UTF-8 的 BOM 的信息。我有括号，所以我不确定它是否在有/没有 BOM 的情况下保存。

这是 php 让它看起来像的 1

这就是我想要的样子 2

网站地址是 mustafasprojects.com

html代码

<!-- Header -->
            <header id="header">
                <h1>Mustafa's Projects</h1>
                <nav>
                    <ul> 
                        <li><a href="#intro">Home</a></li>
                        <li><a href="#about">Who I Am</a></li>
                        <li><a href="#portfolio">My Work</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </nav>
            </header> 

CSS

#header {
        position: fixed;
        z-index: 10000;
        left: 0;
        top: 0;
        width: 100%;
        background: rgba(255, 255, 255, 0.95);
        height: 3em;
        line-height: 3em;
        box-shadow: 0 0 0.15em 0 rgba(0, 0, 0, 0.1);
        animation: 1s ease-out 0s 1 SlideInFromTop;
    }

        #header h1 {
            height: 3em;
            left: 1em;
            line-height: 3em;
            margin: 0;
            padding: 0;
            position: absolute;
            top: -.225em;
            font-size: 1.2em;
        }

        #header h1 a {
                color: #000
                font-size: 1.1em;
                border: 0;
} 

        #header nav {
            position: absolute;
            right: 0.5em;
            top: .525em;
            height: 1em;
            line-height: 1em;
            vertical-align: middle;
        }

            #header nav ul {
                margin: 0;
            }

                #header nav ul li {
                    display: inline-block;
                    margin-left: 0.5em;
                    font-size: 0.95em;

                }

                        #header nav > ul > li a {
                        display: inline-block;
                        height: 1.7em;
                        line-height: 1.7em;
                        padding: 0 .3em;
                        border-radius: 6px;
                    }

                    #header nav > ul > li a:not(.button) {
                        color: #000;
                        display: inline-block;
                        text-decoration: none;
                        border: 0;
                    }

                        #header nav > ul > li a:not(.button).icon:before {
                            color: #999;
                            margin-right: 0.5em;
                        }

                        #header nav > ul > li a:hover:not(.active) {
                            background-color: #266dd3;
                        }
                #header nav > ul > li:first-child {
                        margin-left: 0;
                    }
            #header nav > ul > li.active a:not(.button) {
                        background-color: rgba(153, 153, 153, 0.25);
                    }
                    #header nav > ul > li .button {
                        margin: 0 0 0 0.5em;
                        position: relative;
                    }
    .header.onload-header-fade-down {
            transform: 0.75s ease-in-out;
        transition: opacity .75s ease-in-out, transform .75s ease-in-out;
}
    body {
        padding-top: 3em;
    }

用 php

>

    <div id="page-wrapper">

    <!-- Header -->
        <header id="header">
            <h1>Mustafa's Projects</h1>
            <nav>
                <?php html5blank_nav(); ?>
            </nav>
        </header> 

我在检查器中打开它，似乎我的主类延伸到“主页”的顶部，我的标题延伸到适当的长度。那么这只是检查“main”中的填充的问题吗？

Answer 1

你的主要<div>包装器似乎造成了差距:

#page-wrapper {
    padding-top: 3em;
}