Div 底部的边框，无填充或边距

Question

请看一下这支超级简单的笔，也许有人能告诉我图片下面div中的space是哪里来的？

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

只需在正文标签中添加margin:0px，默认情况下它需要一些边距。检查下面更新的代码段..

.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>

Answer 2

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

对于短期，您可以添加

display: block 到 .parent img
或将 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 3

只需在图像中添加 '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>

Div 底部的边框，无填充或边距

Border at Bottom Of Div, no padding or margin

html

css

image

border