html - 设置相邻两个图像之间的边距或填充

Question

我正在尝试设置彼此相邻的两个图像之间的边距或填充，不知何故边距似乎也是 40%，即一个图像的宽度。如何在让我们说 2px 的图像之间设置我自己的边距/填充？？？

.certifications, .car {
	display:inline-block;
	position:relative;
    vertical-align:middle;
}

.certifications img {
    max-width: 40%;
    height: auto;
}

.car img {
    max-width: 40%;
    height: auto;
}

#wrapper.car {
    max-width: 100%;
	height:auto;
}

 <div id="wrapper car">
                        
                        <div class="car"><img alt=
                        "" src="http://lorempixel.com/100/100"></div>
					
                        <div class="certifications"><img alt=
                        "" src="http://lorempixel.com/100/100""></div>
                    </div>

Answer 1

听起来您希望每张图片都占 wrapper 宽度的 40%。现在每个图像都是 #wrapper > div 宽度的 40%。我

• 从 #wrapper 中删除了不必要的样式
• 将 .certifications 和 .car 设为 #wrapper 宽度的 40%，并在右侧给定它们的间距，并制作图片全宽
• 制作了 .certifications 和 .car block ，因为内联 block 之间的 html 中的空白实际上会占用渲染页面中的空间
• 将最大宽度更改为宽度

.certifications,
.car {
  display: block;
  float: left;
  position: relative;
  vertical-align: middle;
  width: 40%;
  padding-right: 20px;/* could also use margin */
}
img {
  width: 100%;
  height: auto;
}

<div id="wrapper">

  <div class="car">
    <img alt="" src="http://lorempixel.com/100/100">
  </div>
  
  <div class="certifications">
    <img alt="" src="http://lorempixel.com/100/100">
  </div>
  
</div>