Div底部的边框，没有填充或边距[重复]

Question

这个问题在这里已有答案：

• Image inside div has extra space below the image 9个答案
• How do I remove the space between inline-block elements? 37回答

请看看这个超级简单的笔，也许有人可以告诉我图像中div的空间来自哪里？

HTML

<div class="parent">
    <img src="url">
</div>

CSS

.parent {
    display: inline-block;
    background-color: indianred;
    padding: 0;
    margin: 0;

    img {
        padding-bottom: 0;
        margin-bottom: 0;
    }
}

https://codepen.io/hergi/pen/MQLQRd

在此先感谢，这个sh / t现在让我发疯：'/

Answer 1

这是因为<img>是一个display: inline-block元素。你可以阅读https://css-tricks.com/fighting-the-space-between-inline-block-elements来理解它。

短期内，您可以添加

1. display: block到.parent img
2. 或者将font-size: 0添加到.parent来修复它。

.parent {
  display: inline-block;
  position: relative;
  background-color: indianred;
  padding: 0;
  margin: 0;
  width: 500px;
  height: 350px;
}

.parent img {
  display: block;
  width: 100%;
  height: 100%;
  padding-bottom: 0;
  margin-bottom: 0;
  position: relative;
}

.hover-border {    
  box-sizing: border-box;
  transition: ease all .3s;
  border: 0 solid rgba(0,0,0,.3);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  &:hover
}

<div class="parent">
  <img src="https://echtlieb.de/themes/Frontend/Echtlieb/frontend/_public/src/img/produkteigenschaften/frauen/doerte/stoff/stoff-sweat_(grau_meliert).jpg" />
  <div class="hover-border">
    
  </div>
</div>

Answer 2

只需添加'display：block;'到图像。无需为父div提供高度和宽度。

.parent {
    display: inline-block;
    background-color: indianred;
    padding: 0;
    margin: 0;
}

.parent img {
  display: block;
  padding-bottom: 0;
  margin-bottom: 0;
}

<div class="parent">
  <img src="https://echtlieb.de/themes/Frontend/Echtlieb/frontend/_public/src/img/produkteigenschaften/frauen/doerte/stoff/stoff-sweat_(grau_meliert).jpg" />
 
</div>

Answer 3

只需将margin:0px添加到body标签，默认情况下需要一些余量。查看下面的更新代码段..

.parent {
  display: inline-block;
  background-color: indianred;
  padding: 0;
  margin: 0;
}
.parent img {
  padding-bottom: 0;
  margin-bottom: 0;
}

body {
  margin: 0px;
}

<div class="parent">
    <img src="https://echtlieb.de/themes/Frontend/Echtlieb/frontend/_public/src/img/produkteigenschaften/frauen/doerte/stoff/stoff-sweat_(grau_meliert).jpg" />
</div>