在彼此相邻的两个图像之间设置边距或填充

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

听起来你希望每个图像都是包装器宽度的40％。现在每个图像都是#wrapper > div宽度的40％。我

• 从#wrapper
中删除了不必要的样式
• .certifications和.car #wrapper宽度的40％，右侧为间距，图片为全宽
• 制作了.certifications和.car块，因为内联块之间的html中的空格实际上占用了渲染页面中的空间
• 将max-widths更改为widths

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

将ElementInterface::findAll 更改为inline-block。然后你可以为间距添加一个余量：

inline

.certifications, .car {
	display:inline;
    margin-right: 10px;
	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;
}