Small white space between grid and elements inside-CodePudding

so if you run the code below you will see some white space in the bottom (if you go fullscreen it should appear on the side) between the grid border and the squares border, i can't figure out what's causing it or whether i'm doing something wrong.

.board {
  display: grid;
border: 1px solid black;
flex: 1;
grid-template-columns:repeat(2,1fr);
height: 500px;
box-sizing: border-box;
}

.square {
    border: 1px solid black;
    height: auto;
}

.boards-container {
    display: flex;
    gap: 16px;
    padding: 16px;
}

<div >
  <div > 
        <div id="0-0" ></div>
        <div id="0-1" ></div>
        <div id="1-0" ></div>
        <div id="1-1" ></div>
            
   </div>
        
 <div >
        <div id="0-0" ></div>
        <div id="0-1" ></div>
        <div id="1-0" ></div>
        <div id="1-1" ></div>

</div>
</div>

CodePudding user response：

just add body,html{margin:0;padding:0;} to your css

.board {
  display: grid;
border: 1px solid black;
flex: 1;
grid-template-columns:repeat(2,1fr);
height: 500px;
box-sizing: border-box;
}

.square {
    border: 1px solid black;
    height: auto;
}

.boards-container {
    display: flex;
    gap: 16px;
    padding: 16px;
}

div{
background:lightblue;}

body, html{
margin:0;padding:0;}

<div ><div > 
        <div id="0-0" ></div>
        <div id="0-1" ></div>
        <div id="1-0" ></div>
        <div id="1-1" ></div>
            
   </div>
        
 <div >
        <div id="0-0" ></div>
        <div id="0-1" ></div>
        <div id="1-0" ></div>
        <div id="1-1" ></div>

</div>
</div>

CodePudding user response：

We can be seen when zooming in the page, this could be a half pixel, which is being behaved differently with each browser, sometimes it doesn't.

if we see in normally without zoom, there is nothing. You can quick fix by adding box-shadow or outline css to overlook the zoom.