删除<div><ul><li></ul></ul>标签底部的额外空白

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>

​

更新了以实际解决问题