CODEWITHSUNDEEP
csssass
max pleaner
max pleaner

Reputation: 26768

Cannot remove padding/margin in CSS

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:

enter image description here

Upvotes: 5

Views: 4962

Answers (5)

sipi09
sipi09

Reputation: 557

Maybe you should try:

position: relative
float: left
margin: 0
padding: 0

If it's still not working, you may have some other css code affecting your element. You can override it with !important eg: margin: 0 !important.

Good luck!

Upvotes: 0

mmdts
mmdts

Reputation: 954

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:

Upvotes: 9

Taki
Taki

Reputation: 17654

use display:table-cell for your .tile

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

pen

Upvotes: 2

CaliCo
CaliCo

Reputation: 388

Although adjusting your line height may help, since you know how big your grid is width wise, you can set a width to the grid itself and then force the elements to float to the left. Knowing each cell is 20x20, the grid would then have a max width of 200. Here's my solution for your grid:

  .tile-row
      display: block
      margin: 0
      padding: 0
      max-width: 200px

  .tile
      display: inline-block
      float: left
      outline: 1px solid white
      width: 20px
      height: 20px

Upvotes: 1

August
August

Reputation: 2113

The problem appears from display: inline-block another solution might be font-size: 0; or display: flex instead of inline-block

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

Don't forget to set back the font size for .tile in case you use font-size: 0 solution.

Upvotes: 1

Related Questions