Question

请看一下这个超级简单的笔，也许有人可以告诉我图像中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来理解它。

短期内，您可以添加

display: block至.parent img
或将font-size: 0添加到.parent以修复此问题。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

只需将String[] word = { "This is text1.So it should be single line", "This is text2", "This is text3" }; String separator = System.getProperty("line.separator"); Arrays.asList(word).forEach(w -> broadcastMessage.append(w+separator));添加到body标签，默认情况下需要一些余量。检查下面更新的代码段。

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底部的边框，没有填充或边距

3 个答案: