解决 display: block; 不生效

在制作button组件时，css的样式如下

.button {
  display: block;
  margin： 16px 16px;
}

发现display：block没有生效，两个button也没有冲突。

查询资料可知：是css内置的问题，button就是不能display：block;

假如这时给button的样式加上width: 100%;（margin左右有值的情况下），这时会发现button的边框一定会超出

解决方法：给这个button加上一个容器，然后把容器的外边距变成这个容器的内边距

<div>
  <div class={s.button_wrapper}>
    <Button class={s.button}>测试</Button>
  </div>
</div>

.button{
  width: 100%;
  &_wrapper {
    padding: 16px 16px;
  }
}