如何使用HTML/CSS为图片边缘添加空白实现图片居中布局

你当前的图片组无法居中、边距设置不生效主要是三个问题：

• 为三个图片容器同时设置了width: 33.33%和固定宽度600px，样式冲突导致布局计算错乱
• float: left排列的元素默认贴靠父容器左侧，单独给最左侧图片加左边距的方式适配性极差，屏幕尺寸变化就会错位
• 你写的margin-right: 20属于无效CSS，所有长度属性值必须带单位（如px/rem）才会生效

用flex布局实现自动居中，适配所有屏幕尺寸，比手动加边距稳定很多：

1. 先删除#miata、#m6、#m3三个选择器里写死的width: 600px、height: 350px冲突样式，图片已经设置了width:100%会自动适配容器宽度
2. 替换原有内联CSS为以下代码：

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
/* 图片组外层居中容器 */
.img-group-wrap{
    width: 90%;
    max-width: 1800px;
    margin: 0 auto;
    display: flex;
    gap: 20px; /* 控制图片之间的空白大小，可自行调整数值 */
    justify-content: center;
}
.img-container{
    width: 33.33%;
    padding: 5px;
    text-align: center;
} 
.temizle::after{
    content: "";
    clear:both;
    display: table;
}

3. 调整HTML中图片组的结构，给三个图片容器套上外层居中包裹层：

<h2 align="center"> MODELLERİMİZ </h2>
<div class="img-group-wrap">
    <div class="img-container">  
        <img class="aw-zoom"  src="miata.jpg" style="width:100%;" alt="mx-5"  />
        <span class="photodesc">MX-5</span>
    </div>
    <div class="img-container">
        <img class="aw-zoom"  src="m6.jpg" style="width:100%;" alt="mazda6"  />
        <span class="photodesc">Mazda6</span>
    </div>
    <div class="img-container">
        <img class="aw-zoom"  src="m3.jpg" style="width:100%" alt="mazda3" />
        <span class="photodesc">Mazda3</span>
    </div>
</div>

如果你坚持要通过给最左侧图片加左边距实现居中，需要先计算整组图片的总宽度，再设置对应边距（注意补全单位）：

/* 删除三个id上冲突的width、height属性后添加以下规则 */
#miata{
    margin-left: calc( (100% - 1800px - 40px)/2 ); 
    /* 1800px为三个图片容器总宽度，40px为图片间总间距，可根据实际尺寸修改 */
    text-align: center;
}
#m6{
    text-align: center;
}
#m3{
    margin-right: 20px;
    text-align: center;
}

该方式适配性差，屏幕尺寸变化时极易出现错位，优先选择flex自动居中方案。

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