Html 在元素换行时在元素之间保持一点垂直空间？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29937509/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Keeping a bit of vertical space between elements when they wrap?
提问by RocketNuts
Using Bootstrap, when I'm putting a bunch of elements (e.g. buttons) in a row and shrink the window, the elements wrap around.
使用Bootstrap，当我将一堆元素（例如buttons）排成一行并缩小窗口时，元素会环绕。
But while there is some horizontal space between the elements when the window is wide enough to contain everything next to each other, vertically everything gets stuck together, with zero pixels of empty space between.
但是，当窗口足够宽以包含彼此相邻的所有内容时，元素之间有一些水平空间，但垂直方向上的所有内容都粘在一起，中间有零像素的空白空间。
Live example(narrow or widen the output window to see the effect)
现场示例（缩小或扩大输出窗口以查看效果）
Screenshot example:
1. Wide enough, notice space between buttons
2. Wrapping around, notice NO space between the buttons stacked on top of each other
截图示例：
1.足够宽，注意按钮之间的空间
2.环绕，注意堆叠在一起的按钮之间没有空间
I guess I could mess around with some custom CSS, adding vertical margins or whatnot, but in order to keep things as compatible and standard as possible, I wonder if there is a better or more native way to fix this in a Bootstrap layout?
我想我可以处理一些自定义 CSS，添加垂直边距或诸如此类的东西，但是为了尽可能保持兼容和标准，我想知道是否有更好或更原生的方法来在 Bootstrap 布局中解决这个问题？
回答by Shanaka
What happens here is the buttons are displayed as an inline block and by default such elements have no white space or margin to begin with. You can use below method to avoid this.
这里发生的是按钮显示为内联块，默认情况下，这些元素没有空白或边距开始。您可以使用以下方法来避免这种情况。
What I have done is added a class to the parent element of the buttons and inherit style to class "btn".
我所做的是向按钮的父元素添加一个类，并将样式继承到“btn”类。
html
html
<div class='container'>
<div class='row'>
<div class='col-xs-12 button-wrapper'>
<button class='btn btn-primary'>Lorem ipsum dolor sit amet</button>
<button class='btn btn-info'>consectetur adipiscing elit</button>
<button class='btn btn-success'>sed do eiusmod tempor incididunt</button>
</div>
</div>
</div>
css
css
.button-wrapper .btn {
margin-bottom:5px;
}
回答by Millsionaire
With Bootstrap, I always like to make classes for adding top and bottom margins like so:
使用 Bootstrap，我总是喜欢创建用于添加顶部和底部边距的类，如下所示：
.top5 { margin-top:5px; }
.top7 { margin-top:7px; }
.top10 { margin-top:10px; }
.top15 { margin-top:15px; }
.top17 { margin-top:17px; }
.top30 { margin-top:30px; }
.bottom5 { margin-bottom:5px; }
.bottom7 { margin-bottom:7px; }
.bottom10 { margin-bottom:10px; }
.bottom15 { margin-bottom:15px; }
.bottom17 { margin-bottom:17px; }
.bottom30 { margin-bottom:30px; }
It's easy to remember and is a quick fix for this problem. Just add to your main.css file.
它很容易记住，并且可以快速解决此问题。只需添加到您的 main.css 文件。
回答by G.L.P
回答by biplob
Check the examplebelow:
检查下面的例子：
Code:
代码：
.btn {
margin: 10px auto;
}<div class='container'>
<div class='row'>
<div class="col-xs-12 col-sm-4">
<button class="btn btn-block btn-primary">Lorem ipsum dolor sit amet</button>
</div>
<div class="col-xs-12 col-sm-4">
<button class="btn btn-block btn-info">consectetur adipiscing elit</button>
</div>
<div class="col-xs-12 col-sm-4">
<button class="btn btn-block btn-success">sed do eiusmod tempor incididunt</button>
</div>
</div>
</div>回答by Ezhil_UI_Developer
回答by Roland
I am using this method: add a div with some vertical space:
我正在使用这种方法：添加一个带有一些垂直空间的 div：
<div class="vspace1em"></div>
css:
css：
div.vspace1em {
clear: both;
height: 1em;
}
