Text automatically double spaced when there are no spaces or breaks in the code

Question

My output has a large space between "specs" and "black metal" and on top of and below "This is Vudu's..." How do I change that?

<span style="font-size:12px">This is Vudu's newest product...</span>
<h3><strong>Specs</strong></h3>
<main>
  <ul>
    <li>black metal</li>
    <li>aircraft grade material</li>
  </ul>
</main>

I have tried specifying margins with pixels and percentage but neither do anything. I have used two different programs, am currently working on w3schools, but there is always the same result.

Answer 1

Headings and ul have default marging set already in browser. So you need to reset it to 0 like this. (It is not vudu thing...)

h3{
    margin-bottom: 0;
}

ul{
    margin-top: 0;
}

  <span style="font-size:12px">This is Vudu's newest product...</span>
  <h3><strong>Specs</strong></h3>
  <main>
    <ul>
      <li>black metal</li>
      <li>aircraft grade material</li>
    </ul>
  </main>

Answer 2

We need to override two elements the H3 and the UL default styles. The default CSS for an <h3> element is:

display: block; 
font-size: 1.17em; 
margin-top: 1em; 
margin-bottom: 1em; 
margin-left: 0; 
margin-right: 0; 
font-weight: bold;

Default style for (in chrome at least) for <ul is

display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;

Here I include but commented out the defaults and then the part I need to override for the issue at hand using a class for each element since I find using an element name like <h3 or <ul in my CSS simply applies to too much HTML for my taste.

body {
  /* the default for my browser as it is for most */
  font-size: 16px;
}

/* the default *
h3 {
  display: block;
  font-size: 1.17em;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
}
*/


/* the part I need to override */
.specs-heading {
  margin-block-end: 0em;
}

/* the default *
ul {
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
}
*/

/* the part I need to override */
.my-list {
  margin-block-start: 0em;
}

<span style="font-size:12px">This is Vudu's newest product...</span>
<h3 class="specs-heading"><strong>Specs</strong></h3>
<main>
  <ul class="my-list">
    <li>black metal</li>
    <li>aircraft grade material</li>
  </ul>
</main>