删除垂直 div 之间的空格

Question

<div class="flex-33">      
      <div class="menu-container">
        <img class="menu-image" src="img/bocadillobody.png" alt="Sandwitch">
        <div class="menu-description">
         <h4>Sandwitch</h4>
         <p>Powder marshmallow marshmallow brownie carrot cake candy bonbon. Sweet sugar plum gummies caramels tart carrot cake tiramisu cheesecake. Cheesecake biscuit jelly beans. Jelly-o icing chocolate macaroon.   </p>
      </div>
    </div>          
</div>

有人可以帮我消除两个div之间的空白吗img和.menu-description请？

我认为在过去的 3 小时内，我尝试了这里解释的所有内容，但只有部分运气，空白消失了，但在更改浏览器width时重新出现。

Answer 1

因为img是内联级元素，所以将img设置为display:block成为块级，从而删除空格。

.flex-33 div {
  border: red solid 1px
}
img {
  display: block
}

<div class="flex-33">
  <div class="menu-container">
    <img class="menu-image" src="//lorempixel.com/100/100" alt="Sandwitch">
    <div class="menu-description">
      <h4>Sandwitch</h4>
      <p>Powder marshmallow marshmallow brownie carrot cake candy bonbon. Sweet sugar plum gummies caramels tart carrot cake tiramisu cheesecake. Cheesecake biscuit jelly beans. Jelly-o icing chocolate macaroon.</p>
    </div>
  </div>
</div>

或者，您可以在img上设置vertical-align:bottom，因为默认情况下img具有vertical-align:baseline

.flex-33 div {
  border: red solid 1px
}
img {
  vertical-align:bottom
}

<div class="flex-33">
  <div class="menu-container">
    <img class="menu-image" src="//lorempixel.com/100/100" alt="Sandwitch">
    <div class="menu-description">
      <h4>Sandwitch</h4>
      <p>Powder marshmallow marshmallow brownie carrot cake candy bonbon. Sweet sugar plum gummies caramels tart carrot cake tiramisu cheesecake. Cheesecake biscuit jelly beans. Jelly-o icing chocolate macaroon.</p>
    </div>
  </div>
</div>

Answer 2

删除图像中的所有填充和边距以及div。 确保设置图像的高度和宽度。如果不这样做，并且图像的宽度大于高度，则可能会在垂直方向上占用额外的空间。