如何删除图像周围自动生成的HTML容器边距

我正在尝试删除此图像周围自动生成的容器边距。下面是我用来生成它的代码。您可以查看该网站。我试图添加一个，但没有解决问题

.container{
位置：相对位置；
宽度：240px；
高度：240px；
}
.形象{
显示：块；
宽度：100%；
高度：自动；
}
.覆盖{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
身高：100%；
宽度：100%；
不透明度：0；
过渡：放松；
背景色：#008CBA；
}
.container:悬停。覆盖{
不透明度：0.85；
}
.文本{
颜色：白色；
字体大小：20px；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
}

David Moon主管金融事务的助理副总裁，

最简单的解决方法，imo：将您想要的项目包装在一个div中的网格中，并给div

显示：flex

和

flex-wrap:wrap

。祝你好运

那么，只需将

float:left

添加到

容器中即可

（为了实现您在“这是所需的输出”下显示的内容）
Johannes的回答几乎奏效，但它导致了文本将自身重新定位到打开的间隙中的问题（参见下图），而不是所有图像下面的格式


解决方案是使用
显示：内联块.container中编码>



.集装箱{
位置：相对位置；
宽度：50%；
身高：50%；
显示：内联块；
}
.形象{
显示：块；
宽度：100%；
高度：自动；
}
.覆盖{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
身高：100%；
宽度：100%；
不透明度：0；
过渡：放松；
背景色：#008CBA；
}
.container:悬停。覆盖{
不透明度：0.8；
}
.文本{
颜色：白色；
字体大小：25px；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
}
淡入叠加
将鼠标悬停在图像上以查看效果

你好，世界
你好，世界
你好，世界
淡入叠加
将鼠标悬停在图像上以查看效果

我遗漏了什么吗？您链接到的站点看起来像“所需输出”。另外，您站点上的代码与代码的屏幕截图不匹配试一试，这将为您省去一些麻烦。@j08691抱歉，我刚刚将代码同步到Github页面，现在它如我所述显示。如果您的代码片段实际代表了您想要使用的代码，那么回答这个问题会更容易。例如，具有多个图像，并且使用能够被引用的图像。如果您不想在代码段中指向您自己的图像的完整URL，您可以使用像lorempixel.com这样的服务来获取与您的图像大小相同的图像。@MikeMcCaughan此页面的代码可以在此处查看：虽然Float会导致其他问题，但需要缓解这些问题<代码>显示：内联块

通常更容易使用，并且不需要明确的修复。在这种特殊情况下（当您在原始页面添加它时），float可以完美地工作。