Html 如何显示不规则重复但相同的图像，使其边框在行之间对齐？

我正在尝试使用单个

30px

在HTML/CSS中创建一个“像素化”版本，正方形之间有蓝色边框

2px

然而，我在对齐

2px

边框时遇到了难以置信的困难，因为正方形图像在每一行上都不是重复的（例如，前两行只显示两次正方形图像，而第三行显示7次，等等）

我首先设想了一个11 x 8的矩形网格，然后我使用了一个与方形图像宽度和高度相同的

，并且在图像不显示的位置没有边框作为占位符，而在图像显示的位置，每个方形图像都有一个实心边框

1px

问题是，虽然内部的图像正确地显示了

2px

（

1px

+

1px

边框）的折叠边框，但最外层的正方形仅在不靠近另一个正方形的外侧显示

1px

边框

因此，我尝试在“外正方形”的“外侧”设置

2px

边框，但随后将整行图像的整个“行高”（使用

vertical align:middle；

）从

1px

更改为

2px

，在内部正方形顶部创建一个高达1px的空白空间

所以在过去的几个小时里，我一直在拉扯我的头发，试图让它看起来“正确”，使

2px

边框在一个“网格”中正确对齐，而不是出现在没有显示方形图像的地方，但我在转圈子

---

当然，有一种更简单、更直接的方法可以做到这一点什么是神奇的解决方案？

所以，既然你一直在对这个问题发火，我想我可能会建议一个更简单的解决方案，也许不完全是对你的问题的回答，如果没有HTML示例，这是很难给出的

我制作了这个CSS唯一的空间入侵者：

基本上你要做的是为你的像素设置一个通用的CSS规则，我这样定义它：

div{ 
  background-color: transparent;
  border: 1px solid #000;
  float: left;
  width: 30px;
  height: 30px;
}

当然，请选择比

div

更不一般的内容，我这样做只是为了示例。这样，就有一个div组成了透明像素。每次需要填充图像中的一个像素时，只需添加一个类（我使用了

.px

）和这个最小的CSS规则

.px{ 
  background-color: lightgreen;
}

当你开始你的新行时，给你的

div

一个

类。首先
并使其
清晰：左

.first{ 
  clear:left;
}

我认为这是一个非常简单的解决方案开启CSS像素艺术
您能给我们展示一下您的HTML/CSS吗？我建议对每个“像素”（无论是黑色还是绿色）使用正方形，并且始终具有2px边框。在黑色方块上，您只需将边框设置为黑色，这样它就不会真正显示为任何东西。我也做了一些8位css图形…我使用了一个非常标准的公式，发布您的代码，我将指出如何实现它非常聪明！然而，我需要使用实际的图像作为背景，我需要使它们可以点击（链接）到不同的页面。我该如何使用你聪明的CSS解决方案来实现这一点呢？要清楚：我需要使用不同的图像作为实际可见的方块（并使它们可点击）。问题是什么？用
更改包含填充像素的元素问题是我需要在HTML正文中动态设置图像，而不是CSS，因此我不能用不同的
背景图像设置不同的类。我应该使用
样式吗=“背景图像：…
以HTML格式设置它们，还是您推荐一种更好的方法？”？请让我知道，再次感谢！如果您想使用此解决方案，使用
style='background-image'
完全是一种选择。要提出其他解决方案，您应该详细说明您的用例；也许是用小提琴？他们会怎样做？Javascript？PHP？