删除垂直格之间的空间

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

请问有人可以帮我消除两个divs之间的空白img和.menu-description请吗？删除垂直格之间的空间

我估计在过去3小时我尝试了所有解释为here，但只有部分运气，空白消失，但在改变浏览器width再次出现。

来源

2016-04-21 Vlad

发布一个活生生的例子（*有关CSS等*） –

普莱斯e提供你的css代码，不可能在没有看到你的风格的情况下帮助你。 –

更改图像的CSS以显示：block;因为内联元素会导致这样的问题 –

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

来源

2016-04-21 22:42:41 dippas

删除图像中的所有填充和边距以及div。确保你设置了图像的高度和宽度。如果你不这样做，并且图像比它高，那么它可能会占用额外的空间。

来源

2016-04-21 22:41:05 carl

删除垂直格之间的空间

回答

相关问题