html - 元素之间有空格的任何原因吗？

Question

我不确定为什么我正在处理的设计中的某些元素之间存在空格。有问题的元素是 a:#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 -->

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