Unremovable 1px padding on container div-CodePudding

I am trying to tile a div with spans using flexbox, but however I do it - I always seem to have a 1px top and left padding on container div and I do not know what can be causing this.

My CSS:

div, span {
  box-sizing: border-box;
  padding: 0 !important;
  margin: 0 !important;
}

div {
  width: 162px;
  height: 162px;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid gray;
}

span {
  width: 40px;
  height: 40px;
  display: block;
  border: 1px solid gray;
}

And for some reason it has this gap: scrrenshot of the problem

Here is a codepen: https://codepen.io/chappa2/pen/OJOObPL

Would really appreciate if someone could point me in the right direction on this.

CodePudding user response：

You can use table in this case.

table {
  width: 162px;
  height: 162px;
  border: 1px solid gray;
  border-collapse:collapse;
}

td {
  width: 40px;
  height: 40px;
  border: 1px solid gray;
}

<table>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
  </tr>
  <tr>
    <td>E</td>
    <td>F</td>
    <td>H</td>
    <td>I</td>
  </tr>
  <tr>
    <td>J</td>
    <td>K</td>
    <td>L</td>
    <td>M</td>
  </tr>
  <tr>
    <td>N</td>
    <td>O</td>
    <td>P</td>
    <td>Q</td>
  </tr>
</table>

CodePudding user response：

Wrap all span tags in one container and use scale there. It may not be the best solution, but it worked.

.container {
  display: flex;
  flex-wrap: wrap;
  transform: scale(1.01);
}

<div>
  <div >
    <span>A</span>
    <span>B</span>
    <span>C</span>
    <span>D</span>
    <span>E</span>
    <span>F</span>
    <span>H</span>
    <span>I</span>
    <span>J</span>
  </div>
</div>

CodePudding user response：

It's caused by the margin left in the body element,

And here is the remedy for your problem, try adding the style for body element, with your previous stylesheet.

body {
  margin: 0;

}

div, span {
  box-sizing: border-box;
}

div {
  width: 162px;
  height: 162px;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid gray;
}

span {
  width: 40px;
  height: 40px;
  display: block;
  border: 1px solid gray;
}

I think it works perfectly, if this doesn't work contact me.

This is the prove I am correct, because all html content place inside the body element.

Check this Codepen