时间戳

首页 > 解决方案 > 元素边界处的空白

html - 元素边界处的空白

问题描述

我正在学习 CSS 作为尝试构建自己的页面，我发现我所有的元素外面都有白色边框，我该如何删除它们？

下面是我的 CSS 代码，我尝试使用边距 0，它适用于“选择您的语言”，但对于列表项，它周围仍有空间。

#mainHeader {
  background: #3354FF;
  color: #FFFB33;
  margin: auto;
  overflow: hidden;
  text-align: center;
}

#pickLang {
  text-align: left;
  color: white;
  background-image: url('../Image/nightsky.jpeg')
}

#mainNAV {
  background: #33FFEE;
  color: #33FF4E;
}

#mainNAV ul {
  padding: 0;
  margin: auto;
  list-style: none;
}

#mainNAV li {
  display: inline;
  padding: 5px 10px;
}

#mainNAV a {
  text-decoration: none;
  color: black;
  font: 18px;
}
<header id="mainHeader">
  <h1> My Website</h1>
</header>

<body>
  <div id="index">
    <h2 id="pickLang">Pick a Language
      <h2>
  </div>

  <nav id="mainNAV">
    <div class="listItem">
      <ul>
        <li><a href="#">JAVA</a></li>
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">SQL </a></li>
        <li><a href="#">PYTHON</a></li>
      </ul>
    </div>
  </nav>

  <section id="midpart">
    <div class="container">
      <h1>This Page is to learn CSS and HTML</h1>
    </div>
  </section>

图片

标签： htmlcss

解决方案

代替 margin: auto ，尝试 margin: 0;

推荐阅读