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 但是在角落处使用空格获得此结果在下一个图像中显示为箭头： Generated Result Image

Answer 1

1）浏览器默认值通常会在ul元素上留下一些余量，以解决此问题：

ul {
    margin: 0
}

2）figure元素也有默认边距

figure {
        margin: 0
    }

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

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

Answer 2

我会使用display: inline-block作为图像和li元素，删除一些浮点数并将部分边距重置为0，如下所示：

（注意：我将元素的宽度从100缩小到80像素以适应狭窄的片段窗口，但当然你不必为更宽的视口做到这一点）

（注意＃2：我在所有li元素的行尾添加空HTML注释，以避免因使用内联块而导致空格背景而不是填充两个垂直边框之间的整个空间）

＆＃13;

html, body {
margin: 0;
}

nav figure {
  position: absolute;
  width: 100%;
  margin: 0;
}

img {
  width: 80px;
  display: inline-block;
}

.primary-nav {
  float: right;
  margin: 0;
}

.primary-nav>li {
  display: inline-block;
}

.primary-nav>li>a {
  float: left;
  padding: 25px 0;
  width: 80px;
  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;
}

＆＃13;

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

＆＃13;

如何删除css中的角间距？

2 个答案: