删除导航栏两侧和顶部的空白

Question

我已经寻找了许多解决方案，目前我正在重做我拥有的一个网站的代码，因为我将所有 CSS 单独布局在每个 HTML 页面上。最终我有太多页面需要处理，我决定制作一个样式表来清理所有内容，但我的一切都一团糟。缩进、注释等...

目前，我正在网站上的导航栏上工作，但由于某种我无法弄清楚的原因（我已经尝试了很多东西），导航栏正好位于中间，在位置处留下了少量空白栏的顶部、左侧和右侧。这是 HTML：

ul { /* unordered list properties */
  list-style-type: none; /*takes out bullet points */
  margin: 0; /* scaling */
  padding: 0; /* scaling */
  overflow: hidden; /* clipping rules: https://www.w3schools.com/cssref/pr_pos_overflow.asp */
  background-color: #0c1f2e; /* colour */
}
li { /* list item properties */
  float: left; /* move item to the left */
  font-size: 14px; /* set the font size to 14 pixels */
}
li a { /* vertical style */
  display: block; /* display style */
  color: #ffffff; /* text colour */
  text-align: center; /* centres the text */
  padding: 19px; /* vertical padding */
  text-decoration: none; /* remove any text effects */
  font-family: 'Dosis', sans-serif; /* change the font to selected font: Dosis */
}
li a:hover { /* vertical style items when hovered upon by cursor properties */
  background-color: #639ddf; /* set the background colour */
  font-size: 20px; /*set the font size to 20 pixels */
}

    <nav> <!-- begin navigation element -->
      <div id="menu"> <!-- create and start new element with the id: menu -->
        <ul> <!-- begin unordered list -->
          <li><a href="index.html">Home</a></li><!-- list items -->
          <li><a href="WebsiteCompetitions.html">Competitions</a></li>
          <li><a href="WebsiteBuilds.html">Builds</a></li>
          <li><a href="WebsiteImages.html">Images</a></li>
          <li><a href="WebsiteVideos.html">Videos</a></li>
          <li><a href="WebsiteComm.html">Fight Club</a></li>
          <li><a href="WebsiteArticles.html">Articles</a></li>
          <li><a href="/mybb">Forums</a></li>
          <li><a href="WebsiteTools.html">Tools</a></li>
          <li><a href="WebsiteNews.html">News</a></li>
          <li><a href="WebsiteOffers.html">Shop</a></li>
          <li><a href="cooperators.html">Allies</a></li>
          <li><a href="WebsiteMore.html">More</a></li>
        </ul> <!-- end the unordered list -->
      </div> <!-- end the 'menu' element -->
    </nav> <!-- end navigation element -->

提前感谢大家，我希望我已经提供了足够的信息，请不要对我的过度评论或任何事情过于严厉，只是将这些意见留给自己。至于我的问题结构和代码，请纠正我做错的任何事情，并指出我可以如何解决。非常感谢您花时间阅读本文，

Answer 1

这是您要找的吗？

JSFiddle 链接

如果是这样，请在您的 CSS 中。添加这个

body {
   margin: 0px;
}

Answer 2

我遇到的所有解决方案都对我不起作用，但我找到了一个对我有用的解决方案。在我的 CSS 中：

.navbar{
  margin-left: -15px;
  margin-right: -15px;
}

我的似乎有大约 15 像素的边距，只是我无法通过将边距设置为 0 来摆脱它。

Answer 3

看起来浏览器默认的CSS样式正在将

margin: 8px;

添加到正文中。要删除它，请将其添加到您的 css 中：

body {
    margin: 0;
}

Answer 4

将导航栏的边距设置为 0px，并将正文填充设置为 0px；应该有效。

Answer 5

浏览器添加了一些默认边距，因此请检查一下。我将我的设置为 -8px 并且它起作用了。

Answer 6

我尝试了左：0；它就像一个魅力！