How to remove space between divs in different lines

Question

Check this fiddle. I'd like to know how to remove the space between lines. I've already tried removing <br />, but nothing changes. Also I don't want to put negative values for margin-bottom. I don't know whether it's a react or css matter.

HTML

<div id="app"></div>

CSS

div.square {
  display: inline-block;
  width: 20px;
  height: 20px;
}

React

class Square extends React.Component {
    constructor(props) {
        super(props);
        this.style = {
            backgroundColor: 'yellow',
            borderStyle: 'solid',
            borderWidth: 1
        }
    }
    render () {
        return (<div class = "square" style = {this.style}></div>);
    }
}

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    var ret = [];
    for (var i = 0; i < this.props.m; i++) {
        for (var j = 0; j < this.props.n; j++) {
            ret.push(<Square></Square>);
        }
        ret.push(<br />);
    }
    return ret;
  }
}

ReactDOM.render(<App m = "10" n = "10" />,document.querySelector("#app"));

It worked, but I've changed the height and width from 20px to 15px and the issue came back. [Temani Afif](https://stackoverflow.com/users/8620333/temani-afif) — CSS Monteiro, Oct 20 '18 at 04:38
because the default font-size is 16px and now you made the element less with 15px ... use font-size:0 or line-height:0 — Temani Afif, Oct 20 '18 at 08:39
Still not working: https://jsfiddle.net/cirossmonteiro/n5u2wwjg/218430/ — CSS Monteiro, Oct 20 '18 at 15:21
font-size and line-height on the container, not the elements — Temani Afif, Oct 20 '18 at 15:23

Hemadri Dasari · Answer 1 · 2018-10-17T19:38:26.130

Keep in mind that class is reserved for creating components in react. So to add css class names to jsx elements you should use className prop instead of class

Change

 render () {
    return (<div class = "square" style = {this.style}></div>);
}

To

 render () {
    return (<div className= "square" style = {this.style}></div>);
}

And change your css to

 div.square {
     display:inline-block; 
     margin:0;
     vertical-align:top;
     width: 20px;
     height: 20px;
  }

How to remove space between divs in different lines

1 Answers1