我正在使用 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;
}
当我将 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>
这是我添加任何文本之前的网页:
现在这是添加文本后的样子:
似乎是什么问题？
最佳答案
<强>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。您的 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配上一张很酷的猫咪照片
关于html - 如何解决 CSS 中的边距问题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35247053/