html – “内联块”div之间的神秘空白

发布时间：2020-12-14 18:25:54 所属栏目：资源来源：网络整理

导读：参见英文答案 How do I remove the space between inline-block elements?35个我有这样的布局： Fiddle link 在.td之间是一些空白区域,即使margin和padding设置为0. 为什么会发生这种情况以及如何解决这个问题？负边距可能会留下吗？或者更好的解决方案？ s

参见英文答案 > How do I remove the space between inline-block elements?35个
我有这样的布局： Fiddle link

在.td之间是一些空白区域,即使margin和padding设置为0.

为什么会发生这种情况以及如何解决这个问题？负边距可能会留下吗？或者更好的解决方案？

<style>
.tr {
    height: 20px;
    border: 1px solid black;
    overflow: hidden;
    white-space: nowrap;
    word-spacing: 0;
}
.td {
    display: inline-block;
    height: 20px;
    margin: 0;
    padding: 0;
}
</style>
<div class="tr" style="width: 150px;">
    <div class="td" style="width: 50px; background-color: #CCC;"></div>
    <div class="td" style="width: 50px; background-color: #AAA;"></div>
    <div class="td" style="width: 50px; background-color: #666;"></div>
</div>

解决方法

解决方案1：添加评论：

<div class="tr" style="width: 150px;">
    <div class="td" style="width: 50px; background-color: #CCC;"></div><!--
    --><div class="td" style="width: 50px; background-color: #AAA;"></div><!--
    --><div class="td" style="width: 50px; background-color: #666;"></div>
</div>

您也可以在同一行上编写所有内容,但通过注释看起来更干净.

解决方案2：将font-size：0添加到父元素.不要忘记为子元素定义font-size：

.tr {
  font-size: 0;
}
.td {
  font-size: 15px;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!