Question

为了练习CSS，我决定创建类似Google的页面。我的问题是无论我做什么，在身体的顶部和底部总是有一点额外的空间，即使身体有边距和填充为0. HTML标签出于某种原因适用于相同的样式。

HTML code：

<!doctype html>
<html>
<head>
    <title>Google</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css" />
    <meta charset="utf-8" />
</head>
<body>

    <div id="pageWrapper">

        <div id="topBar">
            <ul>
                <li><a href="#">+Tomasz</a></li>
                <li><a href="#">Gmail</a></li>
                <li><a href="#">Grafika</a></li>
            </ul>
        </div> <!-- end of topBar -->

        <div id="middleBar">
            <div id="centerBox">
                <img id="logoImage" alt="Google Logo" src="logo.png" width="269" height="95" />
                <input type="text" size="80" />
                <span id="countryName">Polska</span>
                <div id="centerBoxButtons">
                    <div class="button">Szukaj w Google</div>
                    <div class="button">Szczęśliwy traf</div>
                </div>
            </div> <!-- end of centerBox -->
        </div> <!-- end of middleBar -->

        <div id="bottomBar">
        </div> <!-- end of bottomBar -->

    </div> <!-- end of pageWrapper -->

</body>
</html>

CSS代码：

html {
    background-color: #fff;
    padding: 0px;
    margin: 0px;
    height: 100%;
}

body {
    padding: 0px;
    margin: 0px;
}

#pageWrapper {
    font-family: Tahoma, Arial, sans-serif;
    color: rgb(64,64,64);
    font-size: 0.85em;
    margin: 0px;
    padding: 0px;
}

a:link, a:visited {
    text-decoration: none;
    color: rgb(64,64,64);
}

a:active, a:hover {
    text-decoration: underline;
    color: rgb(64,64,64);
}

#topBar {
    width: 100%;
    height: 60px;
    background-color: yellow;
    line-height: 60px;
    text-align: right;
    margin: 0px;
    padding: 0px;
}

#topBar ul {
    list-style-type: none;
}

#topBar ul li {
    display: inline;
    margin: 0px 10px 0px 0px;
}

#middleBar {
    width: 100%;
    /*border: solid 2px black; /*----------delete this later*/
}

#centerBox {
    margin-top: 125px;
    margin-left: auto;
    margin-right: auto;
    width: 600px;
    height: 200px;
    /*border: solid 2px red; /*--------------delete later*/
}

#centerBox img {
    width: 269px;
    height: 95px;
    margin: 0px 166px 0px 166px;
}

#centerBox input[type="text"] {
    margin: 20px 0 0 0;
    padding: 0;
    height: 25px;

}

#countryName {
    font-size: 1.2em;
    font-weight: bold;
    color: grey;
    position: relative;
    bottom: 75px;
    left: 380px;
}

#centerBoxButtons {
    width: 250px;
    /*border: solid 2px blue; /*--------------delete later*/
    margin-left: 175px;
}

.button {
    font-weight: bold;
    background-color: rgb(240,240,240);
    border: solid 1px rgb(150,150,150);
    padding: 6px;
    font-size: 0.78em;
    display: inline;
    margin-left: 15px;
    border-radius: 4px;
}

.button:active {
    position: relative;
    top: 1px;
    left: 1px;
}

Answer 1

答案很简单。将margin:0px;添加到您的#topBar ul。在这里，你有一个工作fiddle

Answer 2

这是一种简单的方法，您只需将边距填充放在顶部即可查看代码。

＆＃13;

*{
    padding: 0px;
    margin: 0px;
}

html {
    background-color: #fff;
    padding: 0px;
    margin: 0px;
    height: 100%;
}

body {
    padding: 0px;
    margin: 0px;
}

#pageWrapper {
    font-family: Tahoma, Arial, sans-serif;
    color: rgb(64,64,64);
    font-size: 0.85em;
    margin: 0px;
    padding: 0px;
}

a:link, a:visited {
    text-decoration: none;
    color: rgb(64,64,64);
}

a:active, a:hover {
    text-decoration: underline;
    color: rgb(64,64,64);
}

#topBar {
    width: 100%;
    height: 60px;
    background-color: yellow;
    line-height: 60px;
    text-align: right;
    margin: 0px;
    padding: 0px;
}

#topBar ul {
    list-style-type: none;
}

#topBar ul li {
    display: inline;
    margin: 0px 10px 0px 0px;
}

#middleBar {
    width: 100%;
    /*border: solid 2px black; /*----------delete this later*/
}

#centerBox {
    margin-top: 125px;
    margin-left: auto;
    margin-right: auto;
    width: 600px;
    height: 200px;
    /*border: solid 2px red; /*--------------delete later*/
}

#centerBox img {
    width: 269px;
    height: 95px;
    margin: 0px 166px 0px 166px;
}

#centerBox input[type="text"] {
    margin: 20px 0 0 0;
    padding: 0;
    height: 25px;

}

#countryName {
    font-size: 1.2em;
    font-weight: bold;
    color: grey;
    position: relative;
    bottom: 75px;
    left: 380px;
}

#centerBoxButtons {
    width: 250px;
    /*border: solid 2px blue; /*--------------delete later*/
    margin-left: 175px;
}

.button {
    font-weight: bold;
    background-color: rgb(240,240,240);
    border: solid 1px rgb(150,150,150);
    padding: 6px;
    font-size: 0.78em;
    display: inline;
    margin-left: 15px;
    border-radius: 4px;
}

.button:active {
    position: relative;
    top: 1px;
    left: 1px;
}

＆＃13;

<!doctype html>
<html>
<head>
    <title>Google</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css" />
    <meta charset="utf-8" />
</head>
<body>

    <div id="pageWrapper">

        <div id="topBar">
            <ul>
                <li><a href="#">+Tomasz</a></li>
                <li><a href="#">Gmail</a></li>
                <li><a href="#">Grafika</a></li>
            </ul>
        </div> <!-- end of topBar -->

        <div id="middleBar">
            <div id="centerBox">
                <img id="logoImage" alt="Google Logo" src="logo.png" width="269" height="95" />
                <input type="text" size="80" />
                <span id="countryName">Polska</span>
                <div id="centerBoxButtons">
                    <div class="button">Szukaj w Google</div>
                    <div class="button">Szczęśliwy traf</div>
                </div>
            </div> <!-- end of centerBox -->
        </div> <!-- end of middleBar -->

        <div id="bottomBar">
        </div> <!-- end of bottomBar -->

    </div> <!-- end of pageWrapper -->

</body>
</html>

＆＃13;

Answer 3

您看到的是顶部栏中<ul>的填充。这是因为许多HTML元素都有自己的默认样式。此外，这些默认值是特定于浏览器的，如果您想要针对多个浏览器创建像素精确的布局，这对您没有任何帮助。

我最重要的是简单地重置所有元素的所有填充和边距：

* {
   margin: 0;
   padding: 0;
}

有些人会说上面的技术会导致渲染引擎的负载更重，但我从来没有遇到任何问题。无论如何，你可以找到很多＆＃c; CSS重置＆＃39;脚本更具选择性，速度更快。搜索标记为css-reset的其他问题，并查看此Q/A

一些流行的CSS重置源：

http://yui.yahooapis.com/3.5.0/build/cssreset/cssreset-min.css
http://meyerweb.com/eric/tools/css/reset/
https://github.com/necolas/normalize.css/
http://html5doctor.com/html-5-reset-stylesheet/

去除顶部和底部的身体边缘

3 个答案: