html - 删除内联 block 元素中的默认边距？

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

你要这样吗

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