如何解决 CSS 中的边距问题？答案

【问题标题】：How do I fix margin issue in CSS?如何解决 CSS 中的边距问题？
【发布时间】：2016-05-16 18:46:18
【问题描述】：

我正在使用 HTML 和 CSS 创建一个基本的登录页面，其中整个标题背景都是图像。

这是我的 CSS 代码：

body,html {
  height: 100%;
  background: honeydew;
}
header {
  height: 100vh;
  background-image: url(https://s3-us-west-2.amazonaws.com/myBucket/myBG.jpg);
  background-size: cover;
  background-position: center;

}

当我在header 上添加h1 或任何形式的文本时，我的网页会在浏览器顶部产生很大的空白。我也根本无法编辑我的文本。

这里是html：

<!DOCTYPE html>
<html>
  <head>
    <title>myTitle</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <link rel="shortcut icon" type="image/x-icon" href="pencil.ico" />
    <link href="main.css" rel="stylesheet" type="text/css">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
    integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
    crossorigin="anonymous">
  </head>

  <body>
    <header>
      <h1>Hello!</h1>
      <h3>Welcome!</h3>
    </header>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
    integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
    crossorigin="anonymous"></script>
    <!-- jQuery (necessary for Use of jQuery Syntax) -->
    <script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
  </body>
</html>

这是我在添加任何文字之前的网页：

现在是在添加文本之后：

似乎是什么问题？

【问题讨论】：

问题似乎是边距折叠，是 CSS 框模型的默认行为。看我的回答。

标签： html css twitter-bootstrap

【解决方案1】：

1.当您添加 h1 元素时，此 css 应该处理您看到的边距/填充：

h1 {
  padding:0;
  margin:0;
}

要消除标题背景图像周围的间距，您需要确保 html、body 和 header 元素没有边距或填充：

html, body, header {
   margin:0;
   padding:0;
}

你也可以使用这样的东西来摆脱所有元素的默认填充/边距：

* {
  margin:0;
  padding:0;
}

许多开发人员会使用 normalize.css 之类的 CSS 重置来覆盖浏览器默认样式。

2。您的 main.css 应该在 Bootstrap 样式表之后加载。

您应该确保在 Bootstrap.css 之后加载样式。调整您的 html 以匹配此：

<!DOCTYPE html>
<html>
  <head>
    <title>Student Sanctuary</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <link rel="shortcut icon" type="image/x-icon" href="pencil.ico" />


    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
    integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
    crossorigin="anonymous">
    <!-- Latest compiled and minified CSS -->
    <link href="main.css" rel="stylesheet" type="text/css">
  </head>

  <body>
    <header>
      <h1>Hello!</h1>
      <h3>Welcome!</h3>
    </header>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
    integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
    crossorigin="anonymous"></script>
    <!-- jQuery (necessary for Use of jQuery Syntax) -->
    <script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
  </body>
</html>

如果您没有在 Bootstrap 之后加载自定义 CSS 样式，那么您必须将 !important 添加到您的样式中以覆盖 Bootstrap 样式表。

3.这是jsfiddle 中的一个有效解决方案，带有一张很酷的猫照片

【讨论】：

我的文本中没有任何 css 代码被接受。他们只是被忽略了。真正的问题是从我的标题背景图像顶部到浏览器的边距。当我在标题中添加文本时它仍然出现
查看关于标题背景图像边距/填充的编辑
查看与引导 css 相关的编辑 - 您的 main.css 文件应位于引导 css 之后。
你的 jsfiddle 文件也有同样的问题。边距仍在显示
jsfiddle 不允许您在自定义 css 之前加载外部资源。查看更新的小提琴。

【解决方案2】：

您需要像这样覆盖引导程序的 CSS。

header h1 {
  margin: 0;
}

如果你想用一个规则设置所有h1，这样做

h1 {
  margin: 0 !important;
}

如果您确保 CSS 规则在引导后加载，则可以删除 !important

片段

html, body {
  margin: 0;
  height: 100vh;
  background: honeydew;
}
header {
  height: 100%;
  background-image: url(https://s3-us-west-2.amazonaws.com/myBucket/myBG.jpg);
  background-size: cover;
  background-position: center;
}

header h1 {
  margin: 0;
}

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
    integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
    crossorigin="anonymous">

    <header>
      <h1>Hello!</h1>
    </header>

【讨论】：

【解决方案3】：

这实际上是margin collapsing 和CSS 框模型的默认行为。 特别是在H1 的边距应用于header 元素的父元素和子元素之间的折叠边距。

克服边距折叠的常见解决方案是在header 上声明overflow 规则、顶部填充或边框。由于标题具有固定高度overflow: hidden 将是最合适的。有关更多详细信息和更多可能的解决方案，请参阅this answer。

在h1 上将top-margin 设置为0 在这种特殊情况下具有相同的效果，但如果您以后确实想要对其应用上边距，则不是很有用.

body,html {
  height: 100%;
  background: honeydew;
}
header {
  height: 100vh;
  background: #39C;
  overflow: hidden; /* overcome margin collapsing */
}
header h1:first-child {
  /* apply any margins - will not affect header anymore */
}

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
    integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
    crossorigin="anonymous">
</head>
<body>
  <header>
    <h1>Hello!</h1>
    <h3>Welcome!</h3>
  </header>
</body>

【讨论】：