Question

我想删除或减少元素之间的空白区域。这是my code：

＆＃13;

.Col1 {
    display:inline-block;
    width:50%;
    margin:0;
}

.Col2 {
    display:inline-block;
    width:50%;
    margin:0;
}

＆＃13;

<div class="Col1"><h4>Art/Dance:</h4></div>
<div class="Col2"><p><span id="Art_S">$123</span></p></div>
 <!-- Row 2 -->
<div class="Col1"><h4>Cloth:</h4></div>
<div class="Col2"><p><span id="Cloth_S">$123</span></p></div>
 <!-- Row 3 -->
<div class="Col1"><h4>Education:</h4></div>
<div class="Col2"><p><span id="Education_S">$123</span></p></div>

＆＃13;

Answer 1

使用：

  display: inline-block;
  margin-right: -4px;

解决方案1：父级

上的字体大小：0

.inline-block-list { /* ul or ol with this class */
    font-size: 0;
}

.inline-block-list li {
    font-size: 14px; /* put the font-size back */
}

解决方案2：HTML评论

<ul>
    <li>Item content</li><!--
 --><li>Item content</li><!--
 --><li>Item content</li>
</ul>

解决方案3：负保证金

.inline-block-list li {
    margin-left: -4px;
}

解决方案4：降低关闭角度

<ul>
    <li>Item content</li
 ><li>Item content</li
 ><li>Item content</li>
</ul>

CSS内联块元素之间的空白区域

1 个答案: