Question

#child div之间有一些空间。如何让它们完美堆叠而没有任何间隙？当我没有<img>时，没有问题。此外，图像下方还有一条蓝色条纹，这是div的一部分，但我不明白它为什么要显示。

我不是HTML或CSS方面的专家。我是一个初学者，出于营销原因开始接受它。任何帮助和/或建议都非常感谢！

＆＃13;

#parent {
  max-width: 850px;
  margin: 0 auto;
  border: 10px solid black;
}
#child {
  background-color: blue;
  text-align: center;
  color: #eee;
  font-size: 56px;
}
img {
  width: 100%;
}

＆＃13;

<div id="parent">
  <div id="child">
    <img src="http://s3.amazonaws.com/letsrumbl-marketing/images/8c146690-f04b-4e60-89ca-5e2d979f5a16/HowToShare3.png" />
  </div>
  <div id="child">
    <p>Div 2</p>
  </div>
  <div id="child">
    <p>Div 3</p>
  </div>
  <div id="child">
    <p>Div 4</p>
  </div>
</div>

＆＃13;

这是我的问题的图像。 http://imgur.com/a/sqdpB

Answer 1

尝试在段落中将margin和padding设置为0px 这应该可以解决你的问题

Answer 2

默认情况下，段落有一个边距，所以只需删除它。要摆脱图片下方的行，请将vertical-align:top添加到您的img规则中：

＆＃13;

#parent {
  max-width: 850px;
  margin: 0 auto;
  border: 10px solid black;
}
#child {
  background-color: blue;
  text-align: center;
  color: #eee;
  font-size: 56px;
}
img {
  width: 100%;
  vertical-align: top;
}
p {
  margin: 0;
}

＆＃13;

<div id="parent">
  <div id="child">
    <img src="http://s3.amazonaws.com/letsrumbl-marketing/images/8c146690-f04b-4e60-89ca-5e2d979f5a16/HowToShare3.png" />
  </div>
  <div id="child">
    <p>Div 2</p>
  </div>
  <div id="child">
    <p>Div 3</p>
  </div>
  <div id="child">
    <p>Div 4</p>
  </div>
</div>

＆＃13;

添加<img/>后div之间不需要的空间

2 个答案: