How to eliminate space between dt and dd?

I am trying to eliminate the space between dt and dd elements.

I have set all the margins and padding between the two elements to 0. However, the space persists.

I added a background for each (green is dt, tan is dd) and there is clearly a blank space in the middle.

How can I eliminate that space completely or control its height?

To clarify, I mean the space beneath the dt elements and above the dd elements. I would like a space after the dd since each dt and dd is grouped together, and I can accomplish that just fine by using 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>

Try this

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

How to remove Space between dt and dd in Bootstrap Horizontal , This should do the trick: .dl-horizontal dd { margin-left: 120px; }. Introduction. The HTML5 dl, dt and dd tags used to list data. The <dl> tag is used to specify (start) the definition list. This tag is commonly used to implement a glossary. You can put only <dt> and <dd> tags inside the <dl> tag. The <dt> tag is used to specify the definition terms or items in a definition list.

<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>

[Solved] Description list Space between dt and dd, I can't seem to reduce the space between the dt and dd. The dd is supposed to contain an image. I played with the float but failed to get it work. The <dd> tag is used to describe a term/name in a description list. The <dd> tag is used in conjunction with <dl> (defines a description list) and <dt> (defines terms/names). Inside a <dd> tag you can put paragraphs, line breaks, images, links, lists, etc.

reset css by adding this 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;
}

CSS3 Recipes, How to remove Space between dt and dd in Bootstrap Horizontal description #​CSS. This should do the trick: .dl-horizontal dd { margin-left: 120px; }. Share. I have a table with one tr &amp; 2 tds. The 2 td's have tables. There is space between the 2 inner tables, which I don't want. Can someone suggest me how to remove this spacing. Here is my mark up:

dl-horizontal padding on dt and dd · Issue #16587 · twbs/bootstrap , When adding a padding to dd and dt on a dl-horizontal dl the dd has additional spacing The space content is one way to avoid an Opera bug when the The use of table rather than block is only necessary if using :before to  Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information. Learn more Oracle Date TO_CHAR('Month DD, YYYY') has extra spaces in it

Formatting a Definition List < CSS, dt { font-weight: bold; text-decoration: underline; } dd { margin: 0; dl { border: 3px double #ccc; padding: 0.5em; } dt { float: left; clear: left; width:  If it is empty, it will be hard to get the dt/dd to line up correctly because the other dd's will have a height of 20px (for example) and the empty dd will have a height of 0. Be careful with the margin-top, you will have to apply it to both the dt and dd.

<dd>: The Description Details element, The end tag may be omitted if the <dd> element is immediately followed by another <dd> element or a <dt> element, or if there is no more Notes Before Firefox 4, this element was implemented using the HTMLSpanElement  The bullets won’t appear selected. Click Home > Paragraph Dialog Box Launcher. On the Indents and Spacing tab, under Spacing, clear the check from Don’t add space between paragraphs of the same style. If all you want to do is add more space between bullets and text in the list, you’re done! Or ….

Comments
  • could you share a link? What does the web inspector say? it could be possibile that the inner elements have a margin applied?
  • Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet. See How to create a Minimal, Complete, and Verifiable example - Unable to replicate - codepen.io/Paulie-D/pen/NOEqWV
  • I'cant reproduce the problem, Can we see the markup ?
  • What do you have inside your dd? Some element like a p that has default margins applied via the browser stylesheet maybe …?
  • @misorude As you can see by my example, just text. No other elements are inside the dd elements.
  • Unfortunately, this does not change anything for me either
  • Your code snippet is showing it run as you are asking, and I got it to run as you wanted as well. I suggest going into dev tools(ctrl+shift+i) and check what css properties are being applied to the elements.
  • This did not change anything for me. Looks exactly the same as before
  • Did you try it before you posted it?
  • This answer doesn't explain what the problem is: and what if the user has an !important margin elsewhere? why does he should reset all those properties for every element even if he doesn't need to? This approach is potentially harmful
  • it's not harmful approach