css - 如何删除 css 中的 Angular 间距？

Question

我在编写 CSS 时学习 CSS 我遇到了一些问题。 我需要从我的显示网页中删除这个空间。

.grouping:before,
.grouping:after {
  content: " ";
  display: table;
}

.grouping:after {
  clear: both;
}

nav {
  background-color: white;
  position: fixed;
  top: 0px;
  right: 0px;
  left: 0px;
}

nav figure {
  position: absolute;
}

img {
  width: 100px;
}

.primary-nav {
  float: right;
}

.primary-nav>li {
  display: block;
  float: left;
}

.primary-nav>li>a {
  float: left;
  padding: 25px 0;
  width: 100px;
  border-left: 1px solid;
}

nav li a {
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  text-transform: uppercase;
  font-size: 15px;
  text-align: center;
}

nav li:first-child a {
  border-left: none;
}

nav li a:focus,
nav li a:hover {
  background: red;
  background-color: red;
}

body {
  background-color: grey;
}

<nav class="grouping">
  <figure>
    <img src="images/logo.png" alt="LOGO">
    <ul class="primary-nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">Home2</a></li>
      <li><a href="#">Home3</a></li>
      <li><a href="#">Home4</a></li>
      <li><a href="#">Home5</a></li>
    </ul>
  </figure>
</nav>

使用此代码生成的输出必须是这样的: Expected Result Image 但是得到这个结果， Angular 上的空格在下一张图片中用箭头表示: Generated Result Image

Answer 1

1) 通常浏览器默认呈现的 ul 元素有一些边距，要解决此问题，请执行以下操作:

ul {
    margin: 0
}

2) figure 元素也有默认边距

figure {
        margin: 0
    }

尝试检查浏览器的输出，以准确了解浏览器默认设置如何呈现边距，以便更好地查看。

https://jsfiddle.net/t8netg8j/4/