mirror of
https://github.com/Sevichecc/Urara-Blog.git
synced 2025-05-01 05:39:31 +08:00
34 lines
659 B
Markdown
34 lines
659 B
Markdown
---
|
||
title: CSS · Add margin to buttons
|
||
slug: css-margin
|
||
tags:
|
||
- CSS Trick
|
||
- CSS
|
||
created: 2022-01-13T10:04:21.000Z
|
||
summary: 用helper class为单个按钮加margin，防止元素复用时产生不必要的margin
|
||
lastmod: 2022-05-07T05:32:49.156Z
|
||
---
|
||
|
||
用 helper class 为单个按钮加 margin，防止元素复用时产生不必要的 margin
|
||
|
||
## HTML
|
||
|
||
```html
|
||
<button class="btn helper">Text</button>
|
||
```
|
||
|
||
## CSS
|
||
|
||
```css
|
||
.helper {
|
||
margin-right: 1.6rem;
|
||
}
|
||
```
|
||
|
||
## 为按钮增加内边距
|
||
|
||
如果设置 border 数值为负，周边空间则会收到影响，但用 box-shadow 就不会:
|
||
|
||
所以可以这样设置：
|
||
|
||
`box-shadow: inset 0 0 0 3px #fff;`
|