css 两个按钮之间有空

CSS 中有时候我们需要在两个按钮之间添加一定的空白，以使页面更加美观，那么该怎么做呢？下面让我来为大家介绍两种方法。

    /* 方法一：使用 margin */        .btn-group {
            display: flex;
            justify-content: space-between;
    }
        .btn-group button {
            margin-right: 20px;
    }
    

方法一使用了 margin-right 属性来实现两个按钮之间的间隔。可以通过设定合适的 margin 值来达到你想要的效果。

    /* 方法二：使用伪元素 */        .btn-group {
            display: flex;
            justify-content: space-between;
    }
        .btn-group button + button::before {
            content: "";
            display: inline-block;
            width: 20px;
    }
    

方法二使用了 CSS 的伪元素 ::before 来实现按钮之间的空隙。通过在第二个按钮前面添加 ::before 伪元素，并设置一定宽度的空隙，就可以达到与方法一相同的效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！