html - 当一个元素低于另一个元素时，CSS会在元素之间添加空格吗？

Question

我试图弄清楚如何做到这一点，基本上我有两个元素。

<div class="button">This is the first one</div>
<div class="button">This is the second one</div>

有时两者都紧挨着，在这种情况下，我对他们的造型很满意。

但是，如果由于父项太窄而导致第二个“跌倒”，我不希望这两个元素相互接触。

我的问题是，为元素添加下边距也会影响我不想做的情况 1（当它们彼此相邻时）。当一个元素低于另一个元素时，如何将这两个元素分开？

Jsfiddle（尝试扩大和缩小结果框）

Answer 1

一个非常简单的解决方案是使用negative padding值，但由于这是不可能的，我们可以使用另一种简单的方法，即使它有点绕着走。您可以用另一个包装元素包装容器，并给容器一个负值margin-top。

jsFiddle 演示

HTML：

<div class="wrapper">
    <div class="container">
        <div class="button">This is the first button</div>
        <div class="button">This is the second button</div>
    </div>
</div>

CSS：

.wrapper {
    overflow: hidden;
}
.container {
    margin-top: -10px;
}
.button {
    margin-right: 10px;
    margin-top: 10px;
}

Answer 2

这可能没有多大帮助，但我要么确保按钮仅在屏幕宽度不同的情况下彼此下方（在这种情况下我可以通过@media查询解决这个问题），要么添加一些顶部/底部边距并制作其他元素补充了这一点。

Answer 3

这可以通过使用媒体查询http://css-tricks.com/css-media-queries/来实现。基本上，您可以控制当视口低于或高于特定宽度时应用哪些规则。我已经分叉了您的代码以添加基于 520 像素宽的视口的媒体查询，但是您可以根据需要进行调整。

在这里找到代码（CSS）：

.background{
    background: red;
    display: inline-block;
}
.button{
    background: orange;
    padding: 10px;
    display: inline-block;
    margin-right: 10px;
    width: 200px;
}
@media all and (max-width: 520px){
    .button{
        margin: 0 0 10px 0;
    }
    .background{
        width: 220px;
    }
}

和 HTML：

<div class="background">
    <div class="button">This is the first button</div>
    <div class="button">This is the second button</div>
</div>

可以在这里找到分叉的小提琴：http: //jsfiddle.net/vsYpe/1/

希望这可以帮助！！！

Answer 4

我不确定是否有更好的方法来使用 CSS，但如果没有其他方法，第一个元素下方的不可见元素可以工作吗？我不确定您的情况如何，但如果您提供更多详细信息，可能还有其他选择。