为什么我的尾翼网格的第一个元素有点不对齐？

Question

我正在使用尾风CSS来建立一个网格。在父div中，我使用类space-x-1和space-y-1自动对齐子div。

这是很好的工作，除了第一个元素是稍微错对。第一个元素的计算边距为0，而每个其他元素的计算边距为4px。当我从父div中删除space-x-1和space-y-1时，子div具有相同的边距。

​

<!-- Tailwind 3 -->
<script src="https://cdn.tailwindcss.com"></script>


<!-- Body -->
<div class="grid grid-cols-5 space-x-1 space-y-1">
  <div class="text-white text-center p-2 bg-green-700">wood 1</div>
  <div class="text-white text-center p-2 bg-gray-700">ore 2</div>
  <div class="text-white text-center p-2 bg-green-700">wood 3</div>
  <div class="text-white text-center p-2 bg-purple-800">sheep 4</div>
  <div class="text-white text-center p-2 bg-yellow-500">wheat 5</div>
  <div class="text-white text-center p-2 bg-yellow-900">brick 6</div>
  <div class="text-white text-center p-2 bg-pink-700">desert 7</div>
  <div class="text-white text-center p-2 bg-yellow-900">brick 8</div>
  <div class="text-white text-center p-2 bg-gray-700">ore 9</div>
  <div class="text-white text-center p-2 bg-green-700">wood 10</div>
  <div class="text-white text-center p-2 bg-purple-800">sheep 11</div>
  <div class="text-white text-center p-2 bg-yellow-500">wheat 12</div>
  <div class="text-white text-center p-2 bg-yellow-900">brick 13</div>
  <div class="text-white text-center p-2 bg-green-700">wood 14</div>
  <div class="text-white text-center p-2 bg-gray-700">ore 15</div>
  <div class="text-white text-center p-2 bg-yellow-500">wheat 16</div>
  <div class="text-white text-center p-2 bg-purple-800">sheep 17</div>
  <div class="text-white text-center p-2 bg-yellow-500">wheat 18</div>
  <div class="text-white text-center p-2 bg-yellow-900">brick 19</div>
</div>

​

Answer 1

您不应该使用space-x-1和space-y-1，而应该使用gap-1，它用于网格和flex布局。它增加了您的项目之间的差距，没有不必要的边距。您还可以单独使用gap-x-1和gap-y-1。

space-类仅用于水平或垂直布局。它为除第一项之外的所有项目添加空间，以防止开始时出现不必要的空间(这就是为什么您的第一项不对齐)。

Answer 2

如果您使用网格，我将最好使用gap-x-1和gap-y-1。

如果您想要边距、右上、左和下，您可以使用mt-1 ml-1 mr-1 mb-1

​

<!-- Tailwind 3 -->
<script src="https://cdn.tailwindcss.com"></script>


<!-- Body -->
<div class="grid grid-cols-5 gap-x-1 gap-y-1 mt-1 ml-1 mr-1 mb-1">
  <div class="text-white text-center p-2 bg-green-700">wood 1</div>
  <div class="text-white text-center p-2 bg-gray-700">ore 2</div>
  <div class="text-white text-center p-2 bg-green-700">wood 3</div>
  <div class="text-white text-center p-2 bg-purple-800">sheep 4</div>
  <div class="text-white text-center p-2 bg-yellow-500">wheat 5</div>
  <div class="text-white text-center p-2 bg-yellow-900">brick 6</div>
  <div class="text-white text-center p-2 bg-pink-700">desert 7</div>
  <div class="text-white text-center p-2 bg-yellow-900">brick 8</div>
  <div class="text-white text-center p-2 bg-gray-700">ore 9</div>
  <div class="text-white text-center p-2 bg-green-700">wood 10</div>
  <div class="text-white text-center p-2 bg-purple-800">sheep 11</div>
  <div class="text-white text-center p-2 bg-yellow-500">wheat 12</div>
  <div class="text-white text-center p-2 bg-yellow-900">brick 13</div>
  <div class="text-white text-center p-2 bg-green-700">wood 14</div>
  <div class="text-white text-center p-2 bg-gray-700">ore 15</div>
  <div class="text-white text-center p-2 bg-yellow-500">wheat 16</div>
  <div class="text-white text-center p-2 bg-purple-800">sheep 17</div>
  <div class="text-white text-center p-2 bg-yellow-500">wheat 18</div>
  <div class="text-white text-center p-2 bg-yellow-900">brick 19</div>
</div>

​