元素之间有空格的原因是什么？

Question

我不确定为什么我正在设计的设计中的某些元素之间存在空间。有问题的元素是a：#gallery li a我想知道是否有办法摆脱空间而不使用负边距。

＆＃13;

＆＃13;

   /* ========== 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 ========== */

＆＃13;

<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 -->

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

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

要修复它而没有负边距：

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

Updated 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元素的边距以根据您的设计定位它。 要解决此问题，您必须在其父div中添加overflow:auto;。

如果您想使用display:inline-block，还有另一种解决方案。 您只需在li元素中添加一些负余量。喜欢这个..

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

虽然使用负边距不是好习惯。但是在某些特定情况下你可以使用负边距，比如这种情况。

Answer 3

请参阅此fiddle

此行为是由于您显示的内联属性。

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

也就是说，#gallery li a的新CSS就像

#gallery li a {
    float: left;
}