填充物不会消失答案

【问题标题】：Padding won't go away填充物不会消失
【发布时间】：2015-10-18 00:20:59
【问题描述】：

我正在从一个无序列表中构建这个链接网格，由于某种原因，容器 div 在左侧有一些我似乎无法消除的填充。我的目标是让无序列表在容器 div 中居中，两边都没有额外的填充。这是我的代码：

.channels-container {
  max-width: 100rem;
  margin: 10rem auto;
  background: lightblue;
  display: block;
}
.channels-container ul {
  list-style: none;
  -webkit-column-count: 4;
  /* Chrome, Safari, Opera */
  -moz-column-count: 4;
  /* Firefox */
  column-count: 4;
}
.channels-container a {} .channels-container li {
  background: lightgreen;
  margin-bottom: 1rem;
  padding: 2rem;
  text-align: center;
}

<div class="channels-container">
  <ul>
    <a href="/category/funny">
      <li>Funny</li>
    </a>
    <a href="/category/gaming">
      <li>Gaming</li>
    </a>
    <a href="/category/gifs">
      <li>GIFs</li>
    </a>
    <a href="/category/movies">
      <li>Movies</li>
    </a>
    <a href="/category/music">
      <li>Music</li>
    </a>
    <a href="/category/news">
      <li>News</li>
    </a>
    <a href="/category/pics">
      <li>Pics</li>
    </a>
    <a href="/category/politics">
      <li>Politics</li>
    </a>
    <a href="/category/random">
      <li>Random</li>
    </a>
    <a href="/category/science">
      <li>Science</li>
    </a>
    <a href="/category/sports">
      <li>Sports</li>
    </a>
    <a href="/category/style">
      <li>Style</li>
    </a>
    <a href="/category=/technology">
      <li>Technology</li>
    </a>
    <a href="/category/videos">
      <li>Videos</li>
    </a>
  </ul>
</div>

【问题讨论】：

标签： html css html-lists padding

【解决方案1】：

浏览器有默认样式。您需要覆盖这些样式。添加以下样式

html, body {
    margin: 0;
    padding: 0;
}

供参考 - http://plnkr.co/edit/Eq80pPix4OZg8cnSjq2g?p=preview

【讨论】：

我刚刚尝试过，但没有任何改变。这是否意味着我的代码中的其他地方有一些 CSS 正在改变它？

【解决方案2】：

填充不在 div 中，它在您的列表中。

.channels-container {
  max-width: 100rem;
  margin: 10rem auto;
  background: lightblue;
  display: block;
}
.channels-container ul {
  list-style: none;
  -webkit-column-count: 4;
  /* Chrome, Safari, Opera */
  -moz-column-count: 4;
  /* Firefox */
  column-count: 4;
  padding:0em;
}
.channels-container a {} .channels-container li {
  background: lightgreen;
  margin-bottom: 1rem;
  padding: 2rem;
  text-align: center;
}

<div class="channels-container">
  <ul>
    <a href="/category/funny">
      <li>Funny</li>
    </a>
    <a href="/category/gaming">
      <li>Gaming</li>
    </a>
    <a href="/category/gifs">
      <li>GIFs</li>
    </a>
    <a href="/category/movies">
      <li>Movies</li>
    </a>
    <a href="/category/music">
      <li>Music</li>
    </a>
    <a href="/category/news">
      <li>News</li>
    </a>
    <a href="/category/pics">
      <li>Pics</li>
    </a>
    <a href="/category/politics">
      <li>Politics</li>
    </a>
    <a href="/category/random">
      <li>Random</li>
    </a>
    <a href="/category/science">
      <li>Science</li>
    </a>
    <a href="/category/sports">
      <li>Sports</li>
    </a>
    <a href="/category/style">
      <li>Style</li>
    </a>
    <a href="/category=/technology">
      <li>Technology</li>
    </a>
    <a href="/category/videos">
      <li>Videos</li>
    </a>
  </ul>
</div>

【讨论】：

感谢修复它。 :)