从我的导航栏的侧面和顶部删除白色 space

Question

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

目前，我正在网站上的导航栏上工作，但出于某种我无法弄清楚的原因（我已经尝试了很多东西），该栏恰好位于中间，留下了少量栏顶部、左侧和右侧的白色 space。这是 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

看起来浏览器默认 css 样式正在向正文添加 margin: 8px;。要删除它，请将其添加到您的 css:

body {
    margin: 0;
}

Answer 2

这是您要找的吗？

Link to JSFiddle

如果是，在你的 CSS 中。添加这个

body {
   margin: 0px;
}

Answer 3

将导航的边距设置为 0 像素，并将正文内边距设置为 0 像素；应该有效。

Answer 4

None 种我一直在为我工作的解决方案，但我找到了一种。在我的 CSS 中：

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

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

Answer 5

我试过了left:0；它就像一个魅力！

从我的导航栏的侧面和顶部删除白色 space

Remove white space from the sides and top of my navbar

html

css

navigation

margin

padding