为什么在零保证金按钮之间添加了2px空间?

时间:2017-05-13 19:24:01

标签: html css html5 css3

我正在考虑以下事项,发现了两件事:

  1. 即使我将按钮的边距设置为0,按钮左/右仍有2px个空格,为什么(我必须使用-2px来移除空格)?

  2. 如果我有5个20%宽度按钮,边框为2px,它们将适合一行,但使用带有相同边框的span和div,它们将不适合一行,我有要删除边框或设置为0px,似乎按钮边框包含在20%宽度中,但对于span和div,边框会添加到20%?谁能解释一下呢?

  3. 提前致谢。

    button {
       height: 25px;
       width: calc(100% / 5);
       margin: 0;
       padding: 0;
       background: white;
     }
    
    .test,div,span {
      margin: 0 -2px;
    }
    
    
    
    div,span {
       height: 25px;
       width: calc(100% / 5);
       margin: 0 -2px;
       padding: 0;
       border: 2px solid black;
       background: lightblue;
       display: inline-block;
     }
     
     
     .noborder {
       height: 25px;
       width: calc(100% / 5);
       margin: 0 -2px;
       padding: 0;
       border: none;
       background: lightblue;
       display: inline-block;
     }
     
     .aqua{
      background: aqua;
     }
    button (margin: 0px):
    <br><br>
    
    <button>Btn 1</button>
    <button>Btn 2</button>
    <button>Btn 3</button>
    <button>Btn 4</button>
    <button>Btn 5</button>
    
    <hr>
    button (margin: 0 -2px):
    <br><br>
    
    <button class="test">Btn x1</button>
    <button class="test">Btn x2</button>
    <button class="test">Btn x3</button>
    <button class="test">Btn x4</button>
    <button class="test">Btn x5</button>
    
    <hr>
    div:(margin: -2px)<br>
    border: 2px solid black;
    <br><br>
    
    <div>Btn 1</div>
    <div>Btn 2</div>
    <div>Btn 3</div>
    <div>Btn 4</div>
    <div>Btn 5</div>
    
    
    <hr>
    span:(margin: -2px)<br>
    border: 2px solid black;
    <br><br>
    
    <span>Btn 1</span>
    <span>Btn 2</span>
    <span>Btn 3</span>
    <span>Btn 4</span>
    <span>Btn 5</span>
    
    
    <hr>
    div:(margin: -2px)<br>
    border: none;
    <br><br>
    
    <div class="noborder">Btn 1</div>
    <div class="noborder aqua">Btn 2</div>
    <div class="noborder">Btn 3</div>
    <div class="noborder aqua">Btn 4</div>
    <div class="noborder">Btn 5</div>
    
    
    <hr>
    span:(margin: -2px)<br>
    border: none;
    <br><br>
    
    <span class="noborder">Btn 1</span>
    <span class="noborder aqua">Btn 2</span>
    <span class="noborder">Btn 3</span>
    <span class="noborder aqua">Btn 4</span>
    <span class="noborder">Btn 5</span>

2 个答案:

答案 0 :(得分:2)

因为html文档中的内联元素之间的内联块和空格很受尊重。我修改了你的按钮标记,所以我发现这些按钮之间没有额外的空间。

&#13;
&#13;
button {
   height: 25px;
   width: calc(100% / 5);
   margin: 0;
   padding: 0;
   border: 2px solid black;
   background: white;
 }

.test {
  margin: 0 -2px;
}



div,span {
   height: 25px;
   width: calc(100% / 5);
   margin: 0;
   padding: 0;
   border: 2px solid black;
   background: white;
   display: inline-block;
 }
&#13;
button (margin: 0px):
<br><br>

<button>Btn 1</button><button>Btn 2</button><button>Btn 3</button><button>Btn 4</button><button>Btn 5</button>
<hr>
button (margin: 0 -2px):
<br><br>

<button class="test">Btn x1</button>
<button class="test">Btn x2</button>
<button class="test">Btn x3</button>
<button class="test">Btn x4</button>
<button class="test">Btn x5</button>

<hr>
div:(margin: 0px)
<br><br>

<div>Btn 1</div>
<div>Btn 2</div>
<div>Btn 3</div>
<div>Btn 4</div>
<div>Btn 5</div>


<hr>
span:(margin: 0px)
<br><br>

<span>Btn 1</span>
<span>Btn 2</span>
<span>Btn 3</span>
<span>Btn 4</span>
<span>Btn 5</span>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

这实际上并不是一个保证金。它实际上是一个从html代码到达的空间。 </span><span>之间的中断被视为空格,因此会显示为间隙。

要解决此类错误,有多种解决方案。我不会列出所有这些内容,但您可以阅读 this 以供参考。我解决这个bug的方法是将容器内的font-size设置为0(并且在内联块元素内部,我将大小设置回默认值)。