html - 如何防止输入变成空白？

Question

自从我第一次学习 HTML 以来，这一直困扰着我。

<style>
.test{
    display:inline-block;
    background-color:#aaa;
    padding:5px 10px;
    margin:0;
    border:0;
    }
</style>

<div class="test">Hello</div>
<div class="test">Woooorld</div>
<div class="test">HTML</div>
<div class="test">CSS</div>

我肯定希望将元素保持在不同的行中，否则它变得不可读。但是 HTML 将输入变成了空格，这破坏了布局。 float 会导致一系列新问题，或者根本无法实现我正在尝试做的事情。

除了第一个元素之外，是否真的没有比对所有元素实现一些奇特的负边距更好的解决方案了？

Answer 1

解决这个问题的不同方法。

链接:http://css-tricks.com/fighting-the-space-between-inline-block-elements/

第一种方式:

<div class="test">Hello</div><div
class="test">Woooorld</div><div
class="test">HTML</div><div
class="test">CSS</div>

或

<div class="test">Hello</div
><div class="test">Woooorld</div
><div class="test">HTML</div
><div class="test">CSS</div>

第二种方式:

<div class="test">Hello</div><!--
--><div class="test">Woooorld</div><!--
--><div class="test">HTML</div>
<div class="test">CSS</div>

第三种方式: 使用负边距。

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

第四种方式 跳过结束标记

<div class="test">Hello
<div class="test">Woooorld
<div class="test">HTML
<div class="test">CSS</div>

第五种方式 将包装器 div 的字体大小设置为零。

第六种方式也许它们根本不需要内联 block ，也许它们可以以一种或另一种方式 float 。