Cannot remove padding/margin in CSS

Question

I have an HTML structure like this:

<div id='root'>
  <div class='tile-row'>
    <div class='tile'></div>
    <div class='tile'></div>
  </div>
  <div class='tile-row'>
    <div class='tile'></div>
    <div class='tile'></div>
  </div>
</div>

There are actually 10 tile rows and 10 tiles per row.

I'm styling with the following sass:

body, html
  overflow-x: scroll
  padding: 0
  margin: 0
  background-color: black
  color: white

.tile-row
  display: block
  margin: 0
  padding: 0

.tile
  display: inline-block
  outline: 1px solid white
  width: 10px
  height: 10px

The problem is that there is a border/margin between the rows I'm not sure how to get rid of. I want the cells to be right up against each other. here is a codepen of it. Here is a screenshot:

Answer 1

Add line-height: 0 to your .tile-row or change its display to something other than inline-block (for example, to any table-* or grid or flex display).

The explanation:

From the CSS specifation available at https://www.w3.org/TR/CSS2/visudet.html#line-height

As described in the section on inline formatting contexts, user agents flow inline-level boxes into a vertical stack of line boxes. The height of a line box is determined as follows:

The height of each inline-level box in the line box is calculated. For replaced elements, inline-block elements, and inline-table elements, this is the height of their margin box; for inline boxes, this is their 'line-height'. (See "Calculating heights and margins" and the height of inline boxes in "Leading and half-leading".)

The inline-level boxes are aligned vertically according to their 'vertical-align' property. In case they are aligned 'top' or 'bottom', they must be aligned so as to minimize the line box height. If such boxes are tall enough, there are multiple solutions and CSS 2.1 does not define the position of the line box's baseline (i.e., the position of the strut, see below).

The line box height is the distance between the uppermost box top and the lowermost box bottom. (This includes the strut, as explained under 'line-height' below.)

Empty inline elements generate empty inline boxes, but these boxes still have margins, padding, borders and a line height, and thus influence these calculations just like elements with content.

and in other parts of the spec:

inline-block This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.

and:

Inline-level elements are those elements of the source document that do not form new blocks of content; the content is distributed in lines

The conclusion is that the inline-block tiles count as really big characters, and line height just affects them by making the lines slightly larger than the characters are.

Relevant links:

• How CSS line-height is measured?
• https://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/

Answer 2

use display:table-cell for your .tile

.tile
  display: inline-block
  outline: 1px solid white
  width: 20px
  height: 20px
  display: table-cell

pen