元素之间存在空间的任何原因

Question

我不知道为什么我正在设计的设计中的一些元素之间有空间。有问题的元素是a's：#gallery li a我想知道是否有一种方法可以在不使用负边距的情况下消除空间。

   /* ========== PAGE: GALLERY CSS START ========== */
   #gallery {
     margin: 0;
     padding: 0;
     list-style: none;
   }
   #gallery li {
     float: left;
     //width: 28.3%;
     padding: 1em 1em 0 1em;
     margin: 2.5%;
     background-color: #fdfee6;
     color: #bdc3c7;
     border-radius: 10px;
     border-bottom: 4px solid #bdc3c7;
   }
   #gallery li a {
     display: inline-block;
   }
   #gallery li div {
     width: 150px;
     height: 150px;
     box-shadow: inset 0 0px 5px -3px #000;
   }
   #gallery li a:first-child div {
     border-radius: 5px 0 0 5px;
   }
   #gallery li a:last-child div {
     border-radius: 0 5px 5px 0;
   }
   #gallery li a p {
     font-family: 'Nunito', sans-serif;
     margin: 0;
     padding: 1em 0;
     color: #384047;
   }
   /* ========== PAGE: GALLERY CSS END ========== */

<section>
  <!-- main section start -->
  <ul id="gallery">
    <li>
      <a href="#">
        <div style="background:#ff784f;"></div>
        <p>#ff784f</p>
      </a>
      <a href="#">
        <div style="background:lightblue;"></div>
        <p>lightblue</p>
      </a>
      <a href="#">
        <div style="background:#11980d;"></div>
        <p>#11980d</p>
      </a>
    </li>
  </ul>
</section>
<!-- main section end -->

小提琴：http://jsfiddle.net/3heyxvbg/

Answer 1

元素之间的空格是inline-block元素的默认行为。

要在没有负利润的情况下修复它：

#gallery li a {
  display: inline-block; /* Remove */
  float: left; /* Add */
}

更新的JSfiddle

修改输出：

/* ========== PAGE: GALLERY CSS START ========== */
   #gallery {
     margin: 0;
     padding: 0;
     list-style: none;
   }
   #gallery li {
     float: left;
     //width: 28.3%;
     padding: 1em 1em 0 1em;
     margin: 2.5%;
     background-color: #fdfee6;
     color: #bdc3c7;
     border-radius: 10px;
     border-bottom: 4px solid #bdc3c7;
   }
   #gallery li a {
     float: left;
   }
   #gallery li div {
     width: 150px;
     height: 150px;
     box-shadow: inset 0 0px 5px -3px #000;
   }
   #gallery li a:first-child div {
     border-radius: 5px 0 0 5px;
   }
   #gallery li a:last-child div {
     border-radius: 0 5px 5px 0;
   }
   #gallery li a p {
     font-family: 'Nunito', sans-serif;
     margin: 0;
     padding: 1em 0;
     color: #384047;
   }
   /* ========== PAGE: GALLERY CSS END ========== */

<section>
  <!-- main section start -->
  <ul id="gallery">
    <li>
      <a href="#">
        <div style="background:#ff784f;"></div>
        <p>#ff784f</p>
      </a>
      <a href="#">
        <div style="background:lightblue;"></div>
        <p>lightblue</p>
      </a>
      <a href="#">
        <div style="background:#11980d;"></div>
        <p>#11980d</p>
      </a>
    </li>
  </ul>
</section>
<!-- main section end -->

Answer 2

空间是由inline-block元素引起的。可以使用float:left来放弃元素之间的空间。喜欢

#gallery li a {
  float: left;
}

但由于它是浮动元素，您将无法指定ul元素的边距来根据您的设计定位它。为了克服这个问题，你必须在它的父分区中添加overflow:auto;。

如果您想使用display:inline-block，还有另一种解决方案。你只需要在li元素中放一些负的裕度。像这样。。

#gallery li a {
  display: inline-block;
 margin: 0 0 0 -5px;
}

尽管使用负利润率不是一种好的做法。但在某些特定情况下，比如这种情况，你可以使用负利润率。

Answer 3

看看这个小提琴

这种行为是由于您的dispally内联属性造成的。

因此，删除display:inline-block并添加float:left;。

也就是说，#gallery li a的新CSS将类似于

#gallery li a {
    float: left;
}