Question

这些盒子具有相同的样式但结构不同。

http://codepen.io/KevanM/pen/mWeOJV（以下代码）

为什么第二行在方框之间有空格，而在第二行之间没有空格 - 在Chrome工具中查看，边距或填充没有占用空间。

<div class="switch">
    <p class="english">
        <span class="switch-active">Foo</span>
        <a title="Cymraeg" href="#">
            <span class="cymraeg">Bar</span>
        </a>
    </p>
</div>

<hr />

<div class="switch">
    <p class="cymraeg">
        <a title="English" href="#">
            <span class="english">Foo</span>
        </a>
        <span class="switch-active">Bar</span>
    </p>
</div>

CSS：

.switch p {
color: #fff;
}

.switch .english span.switch-active {
background-color: #b50038;
}
.switch .english span {
background-color: #bbb;
padding: 10px;
}

.switch .english span {
background-color: #bbb;
padding: 10px;
}

.switch .cymraeg span.switch-active {
background-color: #b50038;
}

.switch .cymraeg span {
background-color: #bbb;
padding: 10px;
}

Answer 1

span标记前有一个空格。删除它，空间将消失！

<div class="switch"><p class="cymraeg"><a title="English" href="#"><span class="english">Foo</span></a>`space comes here`<span class="switch-active">Bar</span></p>

Answer 2

这是因为（某些）元素是inline-block显示类型，它们对HTML代码中的空格敏感。如果删除foo / bar锚点和span元素之间的空白区域，空格将消失。

 .... active">Foo</span><a title="Cymraeg" href="#"><span ...
                      ^^^^^
                No gap, no space.               

<hr/>

 ...<span class="english">Foo</span></a>  <span class="switch .... 
                                       ^^^^^^
                                  Gap in code, gap in output

<强>解决方案：
删除代码中HTML元素之间的空格。

或者，请阅读a good post by David Walsh，了解如何删除HTML / CSS输出中出现的代码空间。

Answer 3

请注意，在第二个示例的标记闭包和span之间有空格：

</a> Bar

将其删除：

</a>Bar</p＆GT;

你应该没事：

.switch .english span.switch-active {
background-color: #b50038;
}
.switch .english span {
background-color: #bbb;
padding: 10px;
}

.switch .english span {
background-color: #bbb;
padding: 10px;
}

.switch .cymraeg span.switch-active {
background-color: #b50038;
}

.switch .cymraeg span {
background-color: #bbb;
padding: 10px;
}

<div class="switch"><p class="english"><span class="switch-active">Foo</span><a title="Cymraeg" href="#"><span class="cymraeg">Bar</span></a></p></div>

<hr/>

<div class="switch"><p class="cymraeg"><a title="English" href="#"><span class="english">Foo</span></a><span class="switch-active">Bar</span></p>

为什么会出现这个空间？

3 个答案: