删除垂直空间

Question

使用inline-book时如何删除对象之间的垂直空间？

jsfiddle

我想为卡片保持不同的高度，并在它们之间建立一个固定的垂直空间：

更新： 我想让蓝色圆圈的空间完全相同的金色圆圈而不做任何改变：  

Answer 1

使用display:inline-block时，新行被视为一个空格。你可以

1. 将所有内容放在一行中，
之间没有任何间距

.btn {
    padding: 0px;
    border: 1px solid red;
    display: inline-block;
    margin-bottom: 5px;
}

.txt {
    width: 120px;
    height: 120px;
    border: none;
    padding: 0;
    margin: 0;
    background: #77FF77;
   display: inline-block;
}

<div class="btn"><div class="txt inline-block"></div></div><div class="btn"><div class="txt inline-block"></div></div><div class="btn"><div class="txt inline-block"></div></div><div class="btn"><div class="txt inline-block"></div></div><div class="btn"><div class="txt inline-block"></div></div><div class="btn"><div class="txt inline-block"></div></div><div class="btn"><div class="txt inline-block"></div></div><div class="btn"><div class="txt inline-block"></div></div>

1. 在<div>和</div>之间添加评论（同样没有任何间距）

.btn {
    padding: 0px;
    border: 1px solid red;
    display: inline-block;
    margin-bottom: 5px;
}

.txt {
    width: 120px;
    height: 120px;
    border: none;
    padding: 0;
    margin: 0;
    background: #77FF77;
    display: inline-block;
}

<div class="btn"><div class="txt inline-block"></div></div><!--
--><div class="btn"><div class="txt inline-block"></div></div><!--
--><div class="btn"><div class="txt inline-block"></div></div><!--
--><div class="btn"><div class="txt inline-block"></div></div><!--
--><div class="btn"><div class="txt inline-block"></div></div><!--
--><div class="btn"><div class="txt inline-block"></div></div><!--
--><div class="btn"><div class="txt inline-block"></div></div><!--
--><div class="btn"><div class="txt inline-block"></div></div>

对于垂直空间，您可以将margin-bottom: 5px;添加到.btn

Answer 2

这对你有用吗？ https://codepen.io/anon/pen/VXpxbo

我无法使用内置的代码段，因为你的html太长了，所以我使用了codepen。希望这会有所帮助。

.btn {
    padding: 0px;
    border: 1px solid red;
    display: inline-block;
}

.font-size-0 {
    font-size: 0;
}
.txt {
    width: 12px;
    height: 12px;
    border: none;
    padding: 0;
    margin: 0;
    background: #77FF77;
}

:matches( .btn, .font-size-0, .txt){
   box-sizing: border-box;
}

Answer 3

请勿使用display:inline-block;尝试使用float:left;并查看其是否有效。我希望它会。

Answer 4

将margin-bottom属性添加到btn类

.btn {
    border: 1px solid red;
    display: inline-block;
    margin-bottom:5px;
}

Answer 5

将这3行添加到.txt类。

content: "";
display: table;
clear: both;

http://jsfiddle.net/e6raLLc5/67/

Answer 6

您可以使用CSS列：http://jsfiddle.net/e6raLLc5/112/

在这种情况下，我将所有框包装在另一个div：

中

<div class="wrapper">
</div>

并将其设置为列：

.wrapper {
  column-width:14px; /* 12px width + 2px border */
  column-gap: 0; /* you can use 4px for some space between columns */
}

另一种选择是使用flexbox：http://jsfiddle.net/e6raLLc5/79/ - 但我认为它不太健壮：你必须设置包装元素的高度，盒子的宽度可能会有所不同。

无论哪种方式，这都会改变元素的显示顺序 - 而不是逐行显示，第二个框将在的第一个框中。