删除顶部和底部主体边距

Question

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

HTML代码：

<!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

This is a simple way you just put margin padding on top see the code.

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

<!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>

Answer 3

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

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

* {
   margin: 0;
   padding: 0;
}

有人会说上述技术会导致渲染引擎的负载更重，但我这样做从来没有遇到任何问题。无论如何，您可以找到很多 'CSS reset' 脚本，它们更具选择性且速度更快。在标记为 css-reset 的 SO 上搜索其他问题，并检查此 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/

删除顶部和底部主体边距

Remove top and bottom body margins

html

css

margin