Question

我不明白为什么h1的背景图像顶部和底部有间隙。我已经四处寻找，但不能有其他类似问题的人。我尝试了很多不同的属性，但它没有改变。我有一种感觉它与它在h1里面有关，但这就是我得到的。感谢任何帮助;我是初学者。

这是我的代码

newConcurrentHashSet

这是jsfiddle：

enter link description here

- 同样，问题在jsfiddle上不存在。我不知道为什么它会在Atom上发生。

Answer 1

我们需要应用于您网站的css才能获得确切的答案，但是您在css中设置了以下选项

body{
  margin: 0;
  padding: 0;
}

h1{
  margin: 0;
  padding: 0;
}

Answer 2

试试这个。

 * {
   box-sizing: border-box;
 }
 h1 {
  margin : 0;
  padding: 0;
 }

Answer 3

是的，它应该只是标签中的图像。图像将显示在页面顶部。

此外，在图像上再次显示H1 /标题没有意义，因为图片足够描述。

因为你是初学者，所以绝对给自己一个使用高质量图像的功劳。

Answer 4

<h1>K&C Transmission</h1>
<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#contact">Contact</a>
  <a href="#services">Services</a>
  <a href="Javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
</div>

<style>
.topnav {
  background-color: darkblue;
  overflow:hidden;
  border:6px solid black;
  margin-top:0px;
}
.topnav a {
  float:left;
  color:yellow;
  text-align:center;
  padding: 14px 20px;
  text-decoration:none;
  font-size:17px;
}
h1 {
  text-align:inherit;
  background-image: url("/Volumes/BEAR/KandC Transmission/Media/IMG_0090.jpg");
  width:100%;
  margin:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  font-size:50px;
  position:relative;
  top:0px;
  margin-bottom:0px;
  vertical-align: top;


}
</style>

试试这段代码，它会有效。我从height代码中删除了h1。

为什么我的图像在其上方和下方有间隙？

4 个答案: