html - 如何将图像直接堆叠在 div 之上?

标签 html css

<分区>

我有一个位于 div 之上的图像,但 div 和图像之间有一点空间。我希望两者之间没有空格。这是怎么做到的?

我试过使用不同的位置组合:绝对;和position:relative;。我也试过设置 margin: 0;

.headImage {
  width: 100%;
  margin: 0;
}

.headRow {
  margin: 0;
  width: 100%;
  height: 110px;
  background-color: #333;
  padding-left: 10px;
  padding-bottom: 10px;
  padding-top: 10px;
  padding-right: 30px;
  border-bottom: 3px solid #b00;
}
<img class="headImage" src="https://static-cdn.jtvnw.net/jtv_user_pictures/9745b651-cc8b-4a7b-9cad-4082a65b2ec8-profile_banner-480.png">
<div class="headRow">
  <div class="logo">
    <image id="logo" src="mushu.png">
  </div>
  <div class="name">
    <h1 id="name">
      Mushu
    </h1>
  </div>
</div>

我希望图像直接位于 div 的顶部,中间没有空格。

最佳答案

将 img 设置为 display:block;width:100%

.headRow {
  background: red;
}

img {
  display: block;
  width: 100%
}

h1 {
  margin: 0
}
<img class="headImage" src="https://static-cdn.jtvnw.net/jtv_user_pictures/9745b651-cc8b-4a7b-9cad-4082a65b2ec8-profile_banner-480.png">
<div class="headRow">
  <div>
    <img src="mushu.png">
  </div>
  <div>
    <h1>
      Mushu
    </h1>
  </div>
</div>

关于html - 如何将图像直接堆叠在 div 之上?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56636060/

上一篇:html - CSS 文件和图片不显示在本地主机上

下一篇:javascript - 禁用时如何设置表单(可选下拉框)的样式? ( react 引导)

相关文章:

html - bootstrap 4 中窗口宽度减小时如何包装容器以适合顶部容器下方?

javascript - 突出显示表格左下半部分的单元格(三 Angular 形)

html - 一些 Bootstrap div 与其他 Bootstrap div 重叠

jquery - 在启用 javascript 而不是 css 显示 :block 时使用 jQuery slideToggle

html - 固定图像位置

css - 即使调整窗口大小时,绝对定位的元素也居中

css - 编写和限制自定义样式的范围

在 <div> 容器中显示动态消息的 JavaScript 函数

javascript - 有人可以解释一下这个函数吗,因为我不确定使用索引的目的

html - 如何为 google chrome adobe pdf viewer 指定参数?