删除内联块元素中的默认边距？

Question

代码：

<div style={{margin:'20px auto 20px auto', textAlign: 'center'}}>
 {this.state.boxes.map((item,index) => {
  return (<div 
  key={index} 
  style={{display: 'inline-block',boxSizing:'borderBox', border: "solid #333 1px", height: '130px', width: '130px', position: 'relative'}} > </div>)
  })}
</div>

但是你可以看到中间顶部和底部有一点空间？

Answer 1

我在进行网站设计时学到的一个技巧是使用以下内容：

*{
    padding:0px;
    margin:0px;
    font-size:0px;
    border:solid black 0px;
    text-decoration:none;
    box-sizing:border-box;
}

你们中的一些人可能不同意，因为现在你必须重新填充元素的填充等，而且耗时我这样做的原因是因为浏览器以不同的px方式查看事物，所以使用这个可以帮助重置样式以避免遇到这些浏览器问题，您可以在其中添加尽可能多的css样式，它将应用于所有内容。

Answer 2

将font-size:0;设置为外部分区。它将消除额外的间距。

Answer 3

你想这样吗

.outer{
  margin:20px auto 20px auto;
  text-align: center;
  height: 260px;
}
.inner{
  display: inline-block;
  border: solid #333 1px;
  height: 50%;
  width: 33.33%; 
  box-sizing : border-box;
  position: relative;
}
.pull-left{
  float:left;
}

<div class="outer">
  <div class="inner pull-left"></div>
  <div class="inner pull-left"></div>
  <div class="inner pull-left"></div>
  <div class="inner pull-left"></div>
  <div class="inner pull-left"></div>
  <div class="inner pull-left"></div>
</div>