html - 删除垂直 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 小时里我尝试了所有解释的内容 here , 但只有部分运气，空白消失，但在更改浏览器 width 时重新出现。

Answer 1

因为 img 是内联级元素，将 img 设置为 display:block 成为 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>