如何在 CSS 中垂直堆叠的按钮之间放置空格？ [复制]答案

【问题标题】：How to put spaces between vertically stacked buttons in CSS? [duplicate]如何在 CSS 中垂直堆叠的按钮之间放置空格？ [复制]
【发布时间】：2021-01-13 01:49:55
【问题描述】：

以下代码正确地将每个按钮垂直堆叠。

在它们之间插入空格的方法是什么？目前他们彼此粘在一起。

<html>
<head>
<style>

.buttonClass
{
    color: blue;
    background-color: yellow;
    
    display:block;
    width: 50px;
    border: 2px solid green;
}

</style>
</head>

<body>
<button class="buttonClass">one</button>
<button class="buttonClass">two</button>
<button class="buttonClass">three</button>
<button class="buttonClass">four</button>

</body>
</html>

【问题讨论】：

试试这个 => margin: 0 0 1em; .buttonClass
只需添加边距。
@Aquarius_Girl 没问题 - 很乐意提供帮助 :)
这个问题与任何flexbox无关。
不使用 flexbox 的重复封面解决方案，并提供有关您可以使用的其他可能的最佳解决方案的更多详细信息，而不是单独使用边距:)

标签： html css

【解决方案1】：

我们不能使用margin吗？

.buttonClass
{
    color: blue;
    background-color: yellow;
    display: block;
    width: 50px;
    border: 2px solid green;
    margin-bottom: 10px;
}

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="lib/style.css">
    <script src="lib/script.js"></script>
  </head>
  <body>
    <button class="buttonClass">one</button>
    <button class="buttonClass">two</button>
    <button class="buttonClass">three</button>
    <button class="buttonClass">four</button>
  </body>
</html>

【讨论】：

谢谢。我对这一切都很陌生。忘记了边距。
@Aquarius_Girl 没问题，我是这个社区的新手。如果有帮助，您也可以接受答案吗？
接受需要一定的时间。我现在已经做到了。

【解决方案2】：

您可以使用 margin-bottom 在垂直堆叠的 CSS 按钮之间放置空格。

 <html>
<head>
<style>

.buttonClass
{
    color: blue;
    background-color: yellow;
    
    display:block;
    width: 50px;
    margin-bottom:10px;
    border: 2px solid green;
}

</style>
</head>

<body>
<button class="buttonClass">one</button>
<button class="buttonClass">two</button>
<button class="buttonClass">three</button>
<button class="buttonClass">four</button>

</body>
</html>

您的第一个直觉是使用 padding-bottom，但在按钮上使用 padding 会增加文本之间的距离。

最好在按钮上使用内边距而不是宽度和高度。

You can use margin-bottom or padding-bottom to put spaces between vertically stacked css buttons.



 <html>
<head>
<style>

.buttonClass
{
    color: blue;
    background-color: yellow;
    
    display:block;
    padding-left: 12.5px;
  padding-right:12.5px;
    margin-bottom:50px;
    border: 2px solid green;
}

</style>
</head>

<body>
<button class="buttonClass">one</button>
<button class="buttonClass">two</button>
<button class="buttonClass">three</button>
<button class="buttonClass">four</button>

</body>
</html>

【讨论】：