如何删除<ul>和<span>元素之间的空格

Question

这是我的网页的样子（当前不需要空格）

这是我的代码：

 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>

这就是我希望网页显示的样子（注意ul和span标签之间没有空格）

Answer 1

您需要做的就是删除或更改列表的边距。

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元素来与default CSS在浏览器的设置。

UL附带非零边距和填充。您可以自己重置这些：

ul {
   margin:0;
   padding:0;
}

Answer 3

可以修改的余量的属性ul在缺省情况下具有一定的值（由浏览器添加）。

也许ul{margin-bottom: 0;}会有所帮助。