Question

我正在使用HTML＆amp; amp;创建一个基本的目标网页整个标题背景是图像的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;

}

当我在h1我的网页上添加header或任何形式的文字时，会在浏览器顶部创建一个较大的边距。我也根本无法编辑我的文字。

这是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>

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

现在是在添加文字后：

似乎是什么问题？

Answer 1

<强> 1。这个css应该处理你在添加h1元素时看到的边距/填充：

h1 {
  padding:0;
  margin:0;
}

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

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

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

* {
  margin:0;
  padding:0;
}

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

<强> 2。应该在Bootstrap样式表之后加载main.css。

你应该确保在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的工作解决方案，带有很酷的猫照片

Answer 2

你需要像这样覆盖bootstrap的CSS。

header h1 {
  margin: 0;
}

如果您想使用一条规则设置所有h1，请执行以下操作

h1 {
  margin: 0 !important;
}

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

片段

＆＃13;
＆＃13;
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; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 3

这有效margin collapsing和CSS框模型的默认行为。特别是在H1＆＃39;的父元素和子元素之间折叠边距。 s margin应用于header元素。

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

在top-margin上将0设置为h1在此特定情况下效果相同，但如果您确实想要应用顶部，则效果不是很有用 - 稍后再到它。

＆＃13;

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 */
}

＆＃13;

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

＆＃13;

如何修复CSS中的保证金问题？

3 个答案: