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

Question

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

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

我为每个背景添加了背景（绿色为dt，棕褐色为dd），中间显然有空白。

如何完全消除该空间或控制其高度？

为了澄清，我的意思是dt元素下方和dd元素上方的空间。 我想在dd后面留一个空格，因为每个dt和dd都分组在一起，我可以通过使用padding-bottom: 10px;来做到这一点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;
}