CSS: Why is there a space above these elements?

1

CSS is my arch nemesis. I feel like I spend more time trying to fix CSS than I do coding. I’m working on the game of life and am trying to get my cell components to line up in the grid. The code I have right now is pretty basic. For some reason each line of cells has a space above it? I don’t understand where this is coming from.

Screenshot from 2017-04-17 13-00-21.png581×560 734 Bytes

CSS:

default-grid {
    height: 300px;
    width: 500px;
    border: 1px black solid;
    margin: 100px auto;
}

.single-cell {
  height: 10px;
  width: 10px;
  background: pink;
  box-sizing: border-box;
  border: 1px black solid;
  display: inline-block;
  margin: 0;
  padding: 0;
}

Grid.js

import React, { Component } from 'react';
import Cell from './cell';

export default class Grid extends Component {

    renderCells() {
        let theCells = [];
        for(let i = 0; i < 50*30; i++) {
            theCells.push(
              <Cell key={i}></Cell>
            );
        }
        return theCells;
    }

    render() {
        return (
            <div className="default-grid">
                {this.renderCells()}
            </div>
        );
    }
}

Cell.js

import React from 'react';

function Cell() {
    return (
        <div className="single-cell">
        </div>
    );
}

export default Cell;

Can anyone offer some advice on getting rid of the space?

2

Adding float: left to the cell fixed this issue, but I have no idea why. I tried all possible display types.

3

Is it safe to assume you used a CSS reset to override browser defaults?

4

Yes. I used the compass reset.

5

Sorry, I figured you did, but I ran into similar issue last night and figured I’d try helping.

I look forward to hearing the answer!

6

This does seem strange. An easy fix would be to us flexbox. So you could change your default-grid class like so:

.default-grid
    height: 300px
    width: 500px
    border: 1px black solid
    margin: 100px auto
    display: flex
    flex-wrap: wrap

Flexbox has very good browser support too.

7

I tried using flexbox and got the same results. The only thing that fixed it was adding float: left

8

I just built your code locally and flexbox worked for me.

Do you have your repo online?

9

Weird. I wonder if something in the compass reset might actually be causing an issue. I don’t have it online yet.

10

I assume you are using <div>s to wrap grids into rows of grids—would you happen to have tried line-height: 0 on the wrapper? I had this issue a couple weeks ago when I was working on the Game of Life project and that seems to have done the trick. :slight_smile:

Good luck!

1 Like
11

I’m actually not wrapping each row. It’s just one long row of divs that are in the grid container. I might try putting each row into its own grid and see if that fixes anything.

12

Line height works too. That’s a good solution.

13

I made a repo with the code I used if it’s helpful.

There is some extra configuration because it’s from a boilerplate I made and I just plugged your code in.

2 Likes
14

Ah, I see. I was adding display: flex; flex-wrap:wrap to the cell and not the grid. Duh. Now it works. Thanks.

1 Like
15

Hi Rane,

You can keep the initial value of inline-block and remove the space between element. Using flexbox or even floating the elements left are great solutions. But it is also a good thing to know why your initial solution was not working and how to fix it. There is a default space between inline or inline-block elements. It is not the browser default space, it is the same space existing between words. In order to remove it, in your case, you can just set the font-size of the parent element( here .default-grid) to zero, and set a standard value to .single-cell font-size. Please refer to this excellent article from CSS-Tricks.

    .default-grid {
        height: 300px;
        width: 500px;
        border: 1px black solid;
        margin: 100px auto;
        font-size: 0;
    }
    .single-cell {
        height: 10px;
        width: 10px;
        background: pink;
        box-sizing: border-box;
        border: 1px black solid;
        display: inline-block;
        margin: 0;
        padding: 0;
    }
1 Like