css - 如何摆脱 CSS 网格行之间的空白？

Question

我正在尝试制作一个 tik-tak-toe 板。这是我拥有的代码的 JSFiddle。我想删除行之间的空白，使其看起来像一个实际的 tik-tak-toe 板。我该怎么做？谢谢您的帮助。

在 JSFiddle 中找到的代码如下：

#squares {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  align-items: center;
}

#topLeft {
  border-bottom: solid;
  border-width: 10px;
}

#topCenter {
  border-left: solid;
  border-right: solid;
  border-bottom: solid;
  border-width: 10px;
}

#topRight {
  border-bottom: solid;
  border-width: 10px;
}

#middleLeft {
  border-top: solid;
  border-bottom: solid;
  border-width: 10px;
}

#middleCenter {
  border: solid;
  border-width: 10px;
}

#middleRight {
  border-top: solid;
  border-bottom: solid;
  border-width: 10px;
}

#bottomLeft {
  border-top: solid;
  border-width: 10px;
}

#bottomCenter {
  border-left: solid;
  border-top: solid;
  border-right: solid;
  border-width: 10px;
}

#bottomRight {
  border-top: solid;
  border-width: 10px;
}

.square {
  padding: 100px;
  border-width: 10px;
}

<div id="squares">
  <p id="topLeft" class="square">sample</p>
  <p id="topCenter" class="square">sample</p>
  <p id="topRight" class="square">sample</p>
  <p id="middleLeft" class="square">sample</p>
  <p id="middleCenter" class="square">sample</p>
  <p id="middleRight" class="square">sample</p>
  <p id="bottomLeft" class="square">sample</p>
  <p id="bottomCenter" class="square">sample</p>
  <p id="bottomRight" class="square">sample</p>
</div>

标签： csscss-grid

Answer 1

添加margin: 0;到您的.square风格。

#squares {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  align-items: center;
}

#topLeft {
/*  border-bottom: solid; */
  border-width: 10px;
}

#topCenter {
  border-left: solid;
  border-right: solid;
/*  border-bottom: solid; */
  border-width: 10px;
}

#topRight {
/*  border-bottom: solid; */
  border-width: 10px;
}

#middleLeft {
  border-top: solid;
/*  border-bottom: solid; */
  border-width: 10px;
}

#middleCenter {
  border: solid;
  border-bottom: 0; /* added */
  border-width: 10px;
}

#middleRight {
  border-top: solid;
/*  border-bottom: solid; */
  border-width: 10px;
}

#bottomLeft {
  border-top: solid;
  border-width: 10px;
}

#bottomCenter {
  border-left: solid;
  border-top: solid;
  border-right: solid;
  border-width: 10px;
}

#bottomRight {
  border-top: solid;
  border-width: 10px;
}

.square {
  padding: 100px;
  border-width: 10px;
  margin: 0;
}

<div id="squares">
  <p id="topLeft" class="square">sample</p>
  <p id="topCenter" class="square">sample</p>
  <p id="topRight" class="square">sample</p>
  <p id="middleLeft" class="square">sample</p>
  <p id="middleCenter" class="square">sample</p>
  <p id="middleRight" class="square">sample</p>
  <p id="bottomLeft" class="square">sample</p>
  <p id="bottomCenter" class="square">sample</p>
  <p id="bottomRight" class="square">sample</p>
</div>