如何删除伪内容中的填充

Question

当我在伪内容中设置btn-close-sidebar和padding: 0px !important;时，为什么margin: 0px !important;仍然在底部有填充？

.btn-close-sidebar {
  background: red!important;
  padding: 0px !important;
  margin: 0px !important;
}

.btn-close-sidebar::after {
  background: green;
  content: "";
  background-image: url("data:image/svg+xml,<svg class='bi bi-arrow-bar-right' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'> <path fill-rule='evenodd' d='M10.146 4.646a.5.5 0 01.708 0l3 3a.5.5 0 010 .708l-3 3a.5.5 0 01-.708-.708L12.793 8l-2.647-2.646a.5.5 0 010-.708z' clip-rule='evenodd'/><path fill-rule='evenodd' d='M6 8a.5.5 0 01.5-.5H13a.5.5 0 010 1H6.5A.5.5 0 016 8zm-2.5 6a.5.5 0 01-.5-.5v-11a.5.5 0 011 0v11a.5.5 0 01-.5.5z' clip-rule='evenodd'/></svg>");
  background-repeat: no-repeat;
  background-size: 2rem 2rem;
  display: inline-block;
  width: 30px;
  height: 32px;
  margin: 0px !important;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<div class="container p-5"><button type="button" class="btn btn-close-sidebar"></button>

Answer 1

1. 替换为display:block;中的.btn-close-sidebar::after {...}
2. 除非最后选择，否则不要使用important。

.btn-close-sidebar {
  background: red!important;
  padding: 0px !important;
  margin: 0px !important;
}

.btn-close-sidebar::after {
  display: block;
  background: green;
  content: "";
  background-image: url("data:image/svg+xml,<svg class='bi bi-arrow-bar-right' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'> <path fill-rule='evenodd' d='M10.146 4.646a.5.5 0 01.708 0l3 3a.5.5 0 010 .708l-3 3a.5.5 0 01-.708-.708L12.793 8l-2.647-2.646a.5.5 0 010-.708z' clip-rule='evenodd'/><path fill-rule='evenodd' d='M6 8a.5.5 0 01.5-.5H13a.5.5 0 010 1H6.5A.5.5 0 016 8zm-2.5 6a.5.5 0 01-.5-.5v-11a.5.5 0 011 0v11a.5.5 0 01-.5.5z' clip-rule='evenodd'/></svg>");
  background-repeat: no-repeat;
  background-size: 2rem 2rem;
  width: 30px;
  height: 32px;
  margin: 0px !important;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<div class="container p-5"><button type="button" class="btn btn-close-sidebar"></button>

Answer 2

:after伪元素默认情况下内联显示。 Bootstrap在.btn类上将行高设置为1.5 rem。 您可以将此属性设置为0：

.btn-close-sidebar {
  line-height : 0;
  / ...
}

或将显示设置为在伪元素上阻止：

.btn-close-sidebar::after {
  display: block;
  / ...
}