インラインブロック要素のデフォルトマージンを削除しますか？

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>

Answer 2

font-size:0;を外側に設定します。余分な間隔を取り除きます。

Answer 3

私のウェブサイトのデザインをしていることは、以下を使用するときに私が学んだトリックのようにしたいですか：

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

あなたの一部が一致しないことがあるためあなたは要素にパディングなどをリセットしなければなりません。そして、私がこれを行う理由は時間がかかります。なぜなら、ブラウザは多分、いくつかのpxとそのようなものを使用すると、これらのブラウザの問題を回避するためにスタイルをリセットすることができます。それに加えて、すべてに適用されるcssスタイルを追加できます。