从导航栏的侧面和顶部删除空白答案

【问题标题】：Remove white space from the sides and top of my navbar从导航栏的侧面和顶部删除空白
【发布时间】：2018-07-08 16:48:34
【问题描述】：

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

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

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

【问题讨论】：

标签： html css navigation margin padding

【解决方案1】：

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

body {
    margin: 0;
}

【讨论】：

不是浏览器，是Stack Overflowsn-p。这很可能与 <body> 上的填充有关。
不，不是。我在计算机上使用上面的代码创建了一个新的 html 页面，并在 Chrome 中打开它。我检查了它，用户代理样式表将margin: 8px; 添加到body。大多数网站都包含 css 重置，可以删除正文的此边距。

【解决方案2】：

这是你要找的吗？

Link to JSFiddle

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

body {
   margin: 0px;
}

【讨论】：

太好了，很高兴听到！

【解决方案3】：

将导航上的边距设置为 0px 并将正文填充设置为 0px；应该可以。

【讨论】：

【解决方案4】：

我没有为我工作过的解决方案，但我找到了一个。在我的 CSS 中：

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

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

【讨论】：

【解决方案5】：

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

【讨论】：

这并不是处理边距的惯用方式。