删除<div> <ul> <li> </li> </li> <li> </li> </ul> </div>标记底部的多余空格

Question

<link rel="stylesheet" 
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
      integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
      crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
        integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
        crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
        integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
        crossorigin="anonymous">
</script>

h3 {
  font-size: 22px;
  line-height: 28px;
}

ul {
  line-height: 22px;
  padding-bottom: 3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
        integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<!------- START :: SYSTEM REQUIREMENTS --------->
<div class="row">
  <div class="col">
    <div class="card toggle-card">
      <div class="card-header" data-toggle="collapse" href="#SYSTEMREQUIREMENTS" role="button">
        <h3 class="toggle-card-closed">The minimum system requirements are:</h3>
      </div>
      <div class="collapse" id="SYSTEMREQUIREMENTS">
        <div class="card-body">
          <p>p_1</p>
          <ul>
            <li>li_1</li>
          </ul>

          <p>p_2</p>
          <ul>
            <li>li_1</li>
            <li>li_2</li>
            <li><strong>li_3</strong></li>
          </ul>

          <p>p_3</p>
          <ul>
            <li>li_1</li>
            <li>li_2</li>
            <li>li_3</li>
          </ul>

          <p>p_4</p>
          <ul>
            <li>li_1</li>
          </ul>

          <p>p_5</p>
          <p><strong><u>p_6</u></strong></p>
          <p>p_7</p>

          <p>p_8</p>
          <ul>
            <li>li_1</li>
            <li>li_2</li>
          </ul>
          <p><a href="#top">Back to top</a></p>
        </div>
      </div>
    </div>
  </div>
</div>

上面是我的确切代码块，带有替换文本。看起来是这样的：

这应该是这样的：

底部的此“额外”空白在每个ul标签中累积有多个li。如果只有一个li，则空白不会累积。

我有多个div class="row" div class="col" div class="card toggle-card"部分，并且此部分是唯一具有额外空白的部分。绝对是由于li标签中有多个ul，因为我已经退出并调试到最低限度。

免责声明：这似乎仅是IE问题；用IE11测试。我在Edge，Chrome和Firefox中尝试了零问题。

Answer 1

我不确定您的问题是什么（或空格在哪里，我看不到），但是我通过将class="mb-0"添加到任何有问题的元素来解决了许多类似您的问题。这对<p>标签来说（对我而言）尤其常见。

更新：我的第一个答案仍然有效。将<li>更改为<li class="mb-0">。

h3 {
  font-size: 22px;
  line-height: 28px;
}

ul {
  line-height: 22px;
  padding-bottom: 3px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
        integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<!------- START :: SYSTEM REQUIREMENTS --------->
<div class="row">
  <div class="col">
    <div class="card toggle-card">
      <div class="card-header" data-toggle="collapse" href="#SYSTEMREQUIREMENTS" role="button">
        <h3 class="toggle-card-closed">The minimum system requirements are:</h3>
      </div>
      <div class="collapse" id="SYSTEMREQUIREMENTS">
        <div class="card-body">
          <p>p_1</p>
          <ul>
            <li>li_1</li>
          </ul>

          <p>p_2</p>
          <ul>
            <li>li_1</li>
            <li>li_2</li>
            <li><strong>li_3</strong></li>
          </ul>

          <p>p_3</p>
          <ul>
            <li>li_1</li>
            <li>li_2</li>
            <li>li_3</li>
          </ul>

          <p>p_4</p>
          <ul>
            <li>li_1</li>
          </ul>

          <p>p_5</p>
          <p><strong><u>p_6</u></strong></p>
          <p>p_7</p>

          <p>p_8</p>
          <ul>
            <li>li_1</li>
            <li>li_2</li>
          </ul>
          <p class="mb-0"><a href="#top" class="mb-0">Back to top</a></p>
        </div>
      </div>
    </div>
  </div>
</div>

已更新以实际解决问题