有人可以帮我解决一个 css 的小问题吗？

Question

所以，我有一个图像和一条黑线，它们的宽度都是 100%。但由于某种原因，图像高度大小不是 100%，并且我在两个元素之间有一些白色 space。这就是我要修复的问题，所以我不希望 space 存在，图像应该保持响应（移动友好）

谁能告诉我我做错了什么？

我想我使用了错误的 div 结构来响应，我在这方面还是个初学者。

代码如下：

* {
  margin:0;
  padding:0;
}
img {
  width:100%;
}
.blackLine {
   display: block;
    width: 100%;
    height: 70px;
    background-color: #000000;
}

<img src="https://www.pacificenvironment.org/wp-content/uploads/2016/11/hong-kong-china-skyline-720P-wallpaper-1920x300.jpg" alt="Image">
<div class="blackLine">
</div>

Answer 1

在您的代码中，图像和黑线 div 之间有白色 space。这个 whitespace 呈现为单个 space，但是因为您的元素都是全角的，所以 whitespace 显示为整行，因为没有其他地方可以放置它。将字体大小设置为 0 将删除图像和 div.

之间的白色 space

* {
  margin:0;
  padding:0;
}

div.font-zero
{
  font-size: 0;
}

img {
  width:100%;
}

.blackLine {
   display: block;
    width: 100%;
    height: 70px;
    background-color: #000000;
}

<div class="font-zero">
  <img src="https://www.pacificenvironment.org/wp-content/uploads/2016/11/hong-kong-china-skyline-720P-wallpaper-1920x300.jpg" alt="Image">
  <div class="blackLine">
  </div>
</div>

有人可以帮我解决一个 css 的小问题吗？

Can someone help me, in a little css problem?

html

css

responsive-design