如何用HTML和CSS结合容器调整图片布局？间距过大问题求助

我用容器布局图片时遇到间距过大的问题，想让它们更紧凑。尝试过动态缩放图片放入容器，调整width和flex-direction等属性，还是达不到理想效果。作为HTML和CSS新手，求布局优化建议。

我的代码： #

CSS

.item-list {       /*parent container styles*/        
    width: 100%;
    display: flex;          /* allows flex properties */
    flex-direction: row;     /* keeps elements in a row */
    flex-wrap: wrap;        /* wraps elements when they reach the edge of the screen */
}

.img-container {        /*img container styles*/        
    max-width: 33.33%;
    width: 33.33%;
    display: grid;
    display: flex;
    align-items: center;
    justify-content: center;
 }      
img {            /* img styles */
    width: 100%;        
}

HTML

<div class="item-list">
    <div class="img-container">
        <a href="http://127.0.0.1:5500/keychain.html" class="href">
            <img id="keychain1" src="Images/8.webp" alt="keychain1" title="keychain1">
            <section>
                <p>Chainsaw Man Acrylic Keychain</p>
                <hr>
                <p>$10.00</p>
            </section>
        </a>  
    </div>
    
    <div class="img-container">
        <a href="http://127.0.0.1:5500/keychain2.html" class="href"> 
            <img id="keychain2" src="Images/7.webp" alt="keychain2" title="keychain2">
            <section>
                <p>Animal Acrylic Keychain</p>
                <hr>
                <p>$10.00</p>
            </section>
        </a>
    </div>
    
    <div class ="img-container">
        <a href="http://127.0.0.1:5500/stickers.html" class="href">
            <img id="stickers" src="Images/9.webp" alt="stickers" title="stickers">
            <section>
                <p>Stickers</p>
                <hr>
                <p>$2.00-$6.00</p>
            </section>
        </a>
    </div>
    
    <div class ="img-container">
        <a href="http://127.0.0.1:5500/photocard1.html" class="href">
            <img id="Photocard1" src="Images/10.webp" alt="photocard1" title="photocard1">
            <section>
                <p>Photocard Print (Ver 1 Designs)</p>
                <hr>
                <p>$3.75</p>
            </section>       
        </a>
    </div>
    
    <div class ="img-container">
        <a href="http://127.0.0.1:5500/photocard2.html" class="href">
            <img id="Photocard2" src="Images/11.webp" alt="photocard2" title="photocard2">
            <section>
                <p>Photocard Print (Ver 3 Designs)</p>
                <hr>
                <p>$3.75-$12</p>
            </section> 
        </a>
    </div>
</div>

1. 重置全局默认边距，解决隐形间距 #

浏览器会给body、p、hr等元素默认添加边距，这是导致间距过大的核心原因之一。先全局重置：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

box-sizing: border-box确保元素的内边距、边框不会撑开宽度，避免布局超出预期。

2. 清理冗余代码，控制Flex容器间距 #

• 删掉.img-container里重复的display: grid（会被display: flex覆盖，无意义）
• 给.item-list添加gap属性，精准控制子容器之间的间距：

.item-list {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px; /* 调整数值控制间距，越小越紧凑 */
    padding: 10px; /* 可选，避免内容贴紧页面边缘 */
}

3. 修正图片容器宽度，确保排版整齐 #

原来的33.33%宽度没有减去gap的占用空间，会导致一行放不下3个容器。调整宽度计算方式：

.img-container {
    max-width: calc(33.33% - (20px / 3)); /* 减去gap的分摊值，20px是gap的2倍（一行3个元素有2个间隙） */
    width: calc(33.33% - (20px / 3));
    display: flex;
    flex-direction: column; /* 让图片和下方文字垂直排列 */
}

4. 优化内部元素紧凑度 #

调整图片、文字区域的细节间距，让整体更紧凑：

.img-container img {
    width: 100%;
    display: block; /* 去掉图片默认的行内元素底部间距 */
}

.img-container section {
    margin-top: 8px; /* 图片和文字区域的间距，按需调整 */
    text-align: center; /* 文字居中更美观 */
}

.img-container hr {
    margin: 4px 0; /* 缩小横线上下间距 */
}

.img-container p {
    line-height: 1.2; /* 缩小文字行高，减少垂直空间 */
}

最终完整CSS代码 #

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.item-list {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
}

.img-container {
    max-width: calc(33.33% - (20px / 3));
    width: calc(33.33% - (20px / 3));
    display: flex;
    flex-direction: column;
}

.img-container img {
    width: 100%;
    display: block;
}

.img-container section {
    margin-top: 8px;
    text-align: center;
}

.img-container hr {
    margin: 4px 0;
}

.img-container p {
    line-height: 1.2;
}

额外建议 #

• 图片比例保护：如果不想图片被拉伸，给图片加object-fit: cover（裁剪填满容器）或object-fit: contain（完整显示比例）
• 响应式适配：添加媒体查询，在小屏幕自动调整每行元素数量：

@media (max-width: 768px) {
    .img-container {
        max-width: calc(50% - 5px);
        width: calc(50% - 5px);
    }
}

@media (max-width: 480px) {
    .img-container {
        max-width: 100%;
        width: 100%;
    }
}

内容的提问来源于stack exchange，提问作者Mcteve