将图像放置在 Flexbox 中时的 CSS 间隙答案

【问题标题】：CSS Gaps between images when those are placed in Flexbox将图像放置在 Flexbox 中时的 CSS 间隙
【发布时间】：2022-06-12 06:48:45
【问题描述】：

我正在努力学习 CSS。我想写 tesla.com 网站的近似值。

我已经把所有的图片都放在了flexbox中（每张图片都在单独的div中）
我想消除这些图像之间的间隙。
我在 stackoverflow 中查看了多个帖子。
我也搜索了这个问题，但没有找到相关答案。

如果可以的话请指教。

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Electric Cars, Solar & Clean Energy</title>
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="normalize.css">
    <style>
        body {
 
            margin: 0;
            border: 0;
            padding: 0;
        }
        p {
            text-decoration: underline;
            text-align: center;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        }
        .container {
            display: flex;
            gap: 0%;
            margin-right:0 !important;
        }
        .item {
            flex-grow: 1;
            height: 100%;
            margin: 0;
            padding: 0;
            margin-right:0 !important;
        }
        .item img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <p div="impact_report">Read Tesla's 2021 Impact Report</p>
    <div class="class">
        <div class="item">
            <img src="M3-Homepage-Desktop-LHD.jpeg" />
        </div>
        <div class="item">
            <img src="Desktop-ModelY.jpeg" />
        </div>
        <div class="item">
            <img src="Homepage-Model-X-Desktop-LHD.jpeg" />
        </div>
        <div class="item">
            <img src="_25-HP-SolarPanels-D.jpeg" />
        </div>
        <div class="item">
            <img src="HP-SR-Design-D.jpeg" />
        </div>
        <div class="item">
            <img src="dd739764-bcaa-4263-9488-8c73bc9fb046.jpeg" />
        </div>
    </div>
</body>
</html>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

你的意思是这样的？

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Electric Cars, Solar & Clean Energy</title>
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="normalize.css">
    <style>
        body {
 
            margin: 0;
            border: 0;
            padding: 0;
        }
        p {
            text-decoration: underline;
            text-align: center;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        }
        .container {
            display: grid;
            margin-right:0 !important;
            grid-gap: 0;

        }
        .item {
            
            height: 100%;
            margin: 0;
            padding: 0;
            margin-right:0 !important;
        }
        .item img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <p div="impact_report">Read Tesla's 2021 Impact Report</p>
    <div class="container">
        <div class="item">
            <img src="M3-Homepage-Desktop-LHD.jpeg" />
        </div>
        <div class="item">
            <img src="Desktop-ModelY.jpeg" />
        </div>
        <div class="item">
            <img src="Homepage-Model-X-Desktop-LHD.jpeg" />
        </div>
        <div class="item">
            <img src="_25-HP-SolarPanels-D.jpeg" />
        </div>
        <div class="item">
            <img src="HP-SR-Design-D.jpeg" />
        </div>
        <div class="item">
            <img src="dd739764-bcaa-4263-9488-8c73bc9fb046.jpeg" />
        </div>
    </div>
</body>
</html>

【讨论】：

我需要图片在列中而不是在行中。我试图改变它，但完成后，那些微小的空间又出现了。抱歉耽搁了，这是忙碌的一周。
我将其更改为网格而不是 flex。见上面的编辑。如果它仍然给你一些问题，请告诉我。