HTML 边距问题答案

【问题标题】：HTML Margin ProblemsHTML 边距问题
【发布时间】：2016-08-31 19:32:47
【问题描述】：

问题本质上是页面顶部的浅绿色条。我想摆脱它。我不确定这是因为利润还是其他原因。我知道我的背景颜色是浅绿色，但由于某种原因，h1 在页面上太低了。

HTML：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">

        <link href="css/style.css" rel="stylesheet" type="text/css">
        <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css'>

        <title>Portfolio</title>
    </head>
    <body>
        <div class="wrapper">
            <div align="center" class="main-title"><h1>Portfolio</h1></div>
        </div>
    </body>
</html>

CSS：

.main-title {
    font-size: 1.25em;
    font-family: "Ubuntu Condensed";
    background-color: rgb(34, 147, 0);
    margin: 0;
}

body {
    background: rgba(176, 255, 173, 0.52);
    margin: 0;
}

我在这里创建了一个 JSFiddle 来演示我的问题：https://jsfiddle.net/r2vf5qe5/

【问题讨论】：

标签： html css margin

【解决方案1】：

在 CSS 中添加以下内容将解决您的问题。

h1 {
  margin: 0;
}

【讨论】：

罗杰是对的！
默认在顶部和底部有边距。尝试右键单击屏幕上的元素并单击检查元素。浏览器中的工具非常适合标记调试
@TheAustralianBirdEatingLouse 这个解决方案的不足之处在哪里？提供反馈以澄清您的问题。
这并没有消除我指定的绿色边框是问题所在。编辑：我明白了，您将边距添加到 h1 而不是 .main-title。谢谢，这解决了问题。
@TheAustralianBirdEatingLouse 添加此 CSS 后，浅绿色条应该消失了。如果不想要深绿色背景色，则不需要添加 background-color: rgb(34, 147, 0);在 CSS 中

【解决方案2】：

您忘记了默认的 h1 边距添加此代码，它将起作用

h1 {
  margin: 0;
}

要删除绿色背景，请使用此代码https://jsfiddle.net/r2vf5qe5/7/

【讨论】：

【解决方案3】：

转到页面属性并将上边距设置为 0（外观 HTML），因为默认上边距值为 1px。

<body topmargin="0">

【讨论】：

默认在顶部和底部有边距。尝试右键单击屏幕上的元素并单击检查元素。浏览器中的工具非常适合标记调试