How do I remove the space between my and elements

Question

This is what my webpage looks like (current-don't want the space):

This is my code:

 footer {
  background-color: #ddd;
  margin-top: 30px;
  padding: 20px;
}

footer ul {
  display: flex;
  justify-content: flex-end;

}

footer a{
  text-decoration: none;

}

footer span {
  color: #444;
  display: flex;
  justify-content: flex-end;
  margin-top: 5px;
}

<footer>
 <ul>
   <li>
     <a href="#">Privacy</a>
   </li>  
   <li>
     <a href="#">Terms</a>
   </li>
   <li>
    <a href="#">Contact</a>
   </li>  
 </ul>
 <span>
   Copyright 2019, Original Trombones
 </span>
</footer>

This is what I want my webpage to look like (notice no space between the ul and span tags)

Answer 1

All you need to do is remove or change the margin of the list.

footer {
  background-color: #ddd;
  margin-top: 30px;
  padding: 20px;
}

footer ul {
  display: flex;
  justify-content: flex-end;
  list-style-type: none;
  margin: 0; /* Remove default margin */
}

footer a{
  text-decoration: none;

}

footer span {
  color: #444;
  display: flex;
  justify-content: flex-end;
  margin-top: 5px;
}

<footer>
 <ul>
   <li>
     <a href="#">Privacy</a>
   </li>  
   <li>
     <a href="#">Terms</a>
   </li>
   <li>
    <a href="#">Contact</a>
   </li>  
 </ul>
 <span>
   Copyright 2019, Original Trombones
 </span>
</footer>

Answer 2

HTML elements come with default CSS in the browser's settings.

UL comes with non-zero margin and padding. You can reset these yourself:

ul {
   margin:0;
   padding:0;
}

Answer 3

You can modify the margin property of the ul which by default has some value(added by browser).

Maybe ul{margin-bottom: 0;} will help.