remove default margin in inline block elements?

Question

code:

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

but as you can see there's a little space on top and bottom in the middle?

Set `font-size` to `0`. Alternative solutions to explore: https://css-tricks.com/fighting-the-space-between-inline-block-elements/ — UncaughtTypeError, Sep 21 '17 at 10:22
Possible duplicate of [How to remove the space between inline-block elements?](https://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) — MarioZ, Sep 21 '17 at 10:24

score 1 · Answer 1 · answered Sep 21 '17 at 10:23

1

Set font-size:0; to outer division. It will remove the extra spacings.

answered Sep 21 '17 at 10:23

Anmol Sandal

1,468
1
9
16

score 1 · Accepted Answer · answered Sep 21 '17 at 10:38

Do you want like this

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

thanks! the linked question answers were too complicated – gpbaculio Sep 21 '17 at 10:42 — gpbaculio, Sep 21 '17 at 10:42

score 1 · Answer 3 · answered Sep 21 '17 at 12:18

A trick I learnt when doing my website designs is to use the following:

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

Some of you may disagree because now you have to reset padding and etc to the elements and its time consuming the reason I do this is because browsers view things differently maybe by a few px and stuff so using this can help reset styles to avoid coming across those browser issues you can add as much css styles in there it will be applied to everything.

remove default margin in inline block elements?

3 Answers3