html - 如何消除dt和dd之间的空格？

Question

我正在尝试消除 dt 和 dd 元素之间的空格。

我已将两个元素之间的所有边距和填充设置为 0。但是，空格仍然存在。

我给每个都加了背景(绿色是dt，棕褐色是dd)，中间明显有空白。

我怎样才能完全消除那个空间或控制它的高度？

澄清一下，我指的是 dt 元素下方和 dd 元素上方的空间。我希望在 dd 之后有一个空格，因为每个 dt 和 dd 都组合在一起，我可以通过使用 padding-bottom: 10px;

来很好地实现这一点

    * {
   margin: 0;
    }
    body {
       margin: 0;
       padding: 0;
    } 

   
dt,
dd {
  display: block;
}
dt {
  font-weight: 500;
  margin-bottom: 0px;
  padding-bottom: 0px;
  clear: both;
  background-color: #98fb98;
}

dd {
  margin-top: 0px;
  padding-top: 0px;
  padding-bottom: 10px;
  background-color: #f6f0e8;
}

<dl>
  <dt>HTML</dt>
  <dd><em>HyperText Markup Language</em> describes the structure of the page and its contents.</dd>
  <dt>CSS</dt>
  <dd><em>Cascading Style Sheets</em> describes how a site looks and even to some extent how it responds to certain events.</dd>
  <dt>JavaScript</dt>
  <dd>JavaScript is the programming language used to define the logic and function of a site beyond simple look and feel. Any computation or "thinking" is done using JavaScript.</dd>
</dl>

Answer 1

试试这个

dt, dd{
    margin-block-start: 0px;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}