Html 在图像之间添加填充

我想在bootstrap div中的图像之间添加一个空格（空白）

<div class="col-md-3">
    <img src="images/img1.jpg" class="img-responsive" alt=""/>
</div>
<div class="col-md-3">
    <img src="images/img2.jpg" class="img-responsive" alt=""/>
</div>
<div class="col-md-3">
    <img src="images/img3.jpg" class="img-responsive" alt=""/>
</div>
<div class="col-md-3">
    <img src="images/img4.png" class="img-responsive" alt=""/>
</div>

如果我添加

style=“margin:2px；”

它会将最后一个图像推到行外。

试试这个。
设置父div的填充

<div class="col-md-3" style="padding:10px;">
    <img src="images/img1.jpg" class="img-responsive" alt=""/>
</div>

---

我建议不要在网格元素中添加填充。引导网格有自己的填充。使用图形元素不是这样的

<div class="images row">
<div class="col-md-3">
    <figure><img src="images/img1.jpg" class="img-responsive" alt=""/></figure>
</div>
</div>

---

演示url:

使用嵌套列，默认情况下，这将在图像之间创建空格

<div class="row">
  <div class="col-md-3">
    <div class="col-md-12">
        <img src="images/img1.jpg" class="img-responsive" alt=""/>
    </div>
  </div>
  <div class="col-md-3">
    <div class="col-md-12">
        <img src="images/img2.jpg" class="img-responsive" alt=""/>
    </div>
  </div>
  <div class="col-md-3">
    <div class="col-md-12">
        <img src="images/img3.jpg" class="img-responsive" alt=""/>
    </div>
  </div>
  <div class="col-md-3">
    <div class="col-md-12">
        <img src="images/img4.jpg" class="img-responsive" alt=""/>
    </div>
  </div>
</div>

下面是一个带有占位符图像的示例

---

在bootstrap3

col-*

类中已经有了

填充：15px

。所以我认为没有必要增加额外的空间

但是，如果您想在图像之间添加更多的间距（

padding

或

margin

），请尝试将图像包装到另一个div中，然后对该div使用

margin

或

padding

值…或在图像本身中应用padding或margin…您将得到结果

现在

margin:2px

将最后一个图像推到下一行，因为当前您的

col

具有宽度

25%

，即行的宽度

（25*4=100%）

。如果将

margin:2px

应用到

col

，则，

col

的宽度将为

25%+2px

导致整行的

100%+8px

，因为边距总是应用于框外，而填充则应用于框内，…这就是为什么上一个

col

会被推到下一行的原因

堆栈片段

.wrapper{
填充：0；
/*把你的垫子放在这里*/
}

<div class="row">
  <div class="col-md-3">
    <div class="col-md-12">
        <img src="images/img1.jpg" class="img-responsive" alt=""/>
    </div>
  </div>
  <div class="col-md-3">
    <div class="col-md-12">
        <img src="images/img2.jpg" class="img-responsive" alt=""/>
    </div>
  </div>
  <div class="col-md-3">
    <div class="col-md-12">
        <img src="images/img3.jpg" class="img-responsive" alt=""/>
    </div>
  </div>
  <div class="col-md-3">
    <div class="col-md-12">
        <img src="images/img4.jpg" class="img-responsive" alt=""/>
    </div>
  </div>
</div>