时间戳

首页 > 解决方案 > 如何删除两个div之间的空间

html - 如何删除两个div之间的空间

问题描述

html

<div class="cartDialog" id="cartDialog">
    <div class="formContainer"></div>
    <div class="itemsContainer"></div>
</div>

css

*{
    margin: 0;
    padding: 0;
    font-family: 'Heebo', sans-serif;
}

div.cartDialog{
    position: absolute;
    top: 0;
    width: 100vw;
    height: 140px;
    background-color: #5e0d0d;
}

div.cartDialog .formContainer{
    display: inline-block;
    height: 140px;
    width: 200px;
    background-color: black;

}

div.cartDialog .itemsContainer{
    display: inline-block;
    height: 140px;
    width: calc(100vw - 205px);
    background-color: green;
}

看起来 formContainer 和 ItemsContainer 之间有一些空间。你能告诉我为什么会这样，我该如何删除它。您可以在 ItemContainer css 中看到宽度是 calc(100vw - 205px)，即使 formContainer 宽度是 200。原因是它看起来像空间是 formContainer 宽度的一部分，当我设置宽度 calc (100vw - 200px) itemsContainer 转到下一行。

https://i.stack.imgur.com/RSwYN.png

标签： htmlcss

解决方案

因为我使用了 inline-block，所以 div 之间有一个默认空间。

要删除它，您可以设置为div.cartDialog font-size: 0;

推荐阅读