时间戳

首页 > 解决方案 > 如何在 CSS 中垂直堆叠的按钮之间放置空格？

html - 如何在 CSS 中垂直堆叠的按钮之间放置空格？

问题描述

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

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

<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>

标签： htmlcss

解决方案

我们不能用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>

推荐阅读