button.classList.add("btn", "btn-primary"); 如何设置间距?
时间: 2024-01-15 17:19:48 浏览: 32
根据提供的引用内容,设置按钮间距的方法如下:
1. 使用CSS的margin属性来设置按钮的外边距。可以通过为按钮元素添加一个类,并在CSS中为该类设置margin属性来实现。例如:
```html
<button class="btn btn-primary btn-spacing">Primary button</button>
```
```css
.btn-spacing {
margin: 10px;
}
```
2. 使用CSS的padding属性来设置按钮的内边距。可以通过为按钮元素添加一个类,并在CSS中为该类设置padding属性来实现。例如:
```html
<button class="btn btn-primary btn-spacing">Primary button</button>
```
```css
.btn-spacing {
padding: 10px;
}
```
3. 使用CSS的flexbox布局来设置按钮之间的间距。可以将按钮元素放置在一个容器中,并使用flexbox布局来设置容器的间距。例如:
```html
<div class="button-container">
<button class="btn btn-primary">Primary button</button>
<button class="btn btn-primary">Button</button>
</div>
```
```css
.button-container {
display: flex;
justify-content: space-between;
gap: 10px;
}
```
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)