如何消除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;
}

Answer 2

<style type="text/css">
dt, dd {
            display: block;
            margin: 0px;
            padding: 0px;
            margin-bottom: 5px;
        }
        dt {
            font-weight: 500;
            clear: both;
            background-color: #98fb98;
        }
        dd {
            padding-bottom: 10px;
            background-color: #f6f0e8;
        }   
</style>


<dd>This is dd</dd>
<dt>This is dt</dt>
<dd>This is dd</dd>
<dt>This is dt</dt>
<dd>This is dd</dd>
<dt>This is dt</dt>
<dd>This is dd</dd>
<dt>This is dt</dt>

Answer 3

通过添加此CSS重设CSS

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: top;
}

/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}