Question

我正在围绕bootstrap 3，html5和css3。试图建立一个包含几张图片的页面：

.front {
  margin: 3px;
  padding: 3px;
}
img {
  height: 300px;
}

<div class="form-group">
  <div class="col-lg-3">
    <div class="front">
      <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRE1_PJ6L1IQVa2v6Xd1G7vypRQbQmCKGTq0TkMNJmMHFPm-hvKYA" alt="messi" />
    </div>
  </div>
  <div class="col-lg-3">
    <div>
      <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRE1_PJ6L1IQVa2v6Xd1G7vypRQbQmCKGTq0TkMNJmMHFPm-hvKYA" alt="messi" />
    </div>
  </div>
  <div class="col-lg-3">
    <div>
      <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRE1_PJ6L1IQVa2v6Xd1G7vypRQbQmCKGTq0TkMNJmMHFPm-hvKYA" alt="messi" />
    </div>
  </div>
  <div class="col-lg-3">
    <div>
      <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRE1_PJ6L1IQVa2v6Xd1G7vypRQbQmCKGTq0TkMNJmMHFPm-hvKYA" alt="messi" />
    </div>
  </div>

  <div class="col-lg-3">
    <div>
      <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRE1_PJ6L1IQVa2v6Xd1G7vypRQbQmCKGTq0TkMNJmMHFPm-hvKYA" alt="messi" />
    </div>
  </div>
  <div class="col-lg-3">
    <div>
      <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRE1_PJ6L1IQVa2v6Xd1G7vypRQbQmCKGTq0TkMNJmMHFPm-hvKYA" alt="messi" />
    </div>
  </div>
  <div class="col-lg-3">
    <div>
      <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRE1_PJ6L1IQVa2v6Xd1G7vypRQbQmCKGTq0TkMNJmMHFPm-hvKYA" alt="messi" />
    </div>
  </div>
  <div class="col-lg-3">
    <div>
      <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRE1_PJ6L1IQVa2v6Xd1G7vypRQbQmCKGTq0TkMNJmMHFPm-hvKYA" alt="messi" />
    </div>
  </div>

</div>

问题：如何在图像之间添加一些空格（边距，填充）？我试图为img css规则设置边距/填充：

这是代码的链接：https://github.com/dimster2013/soccerapp/commit/f9bde7aafbcffffabc9b034b66ee25440ea5f6aa

Answer 1

一种方法是为包含图像的div（col-lg-3）添加边距 - 此规则看起来与此类似：

.col-lg-3 {
    margin-bottom: 40px;
}

这会在你要求的图像之间增加空间。它仍然会显示彼此之下的所有图像，而不是在同一行上;你的问题的其他答案解释了原因。

Answer 2

Add Below CSS

.col-sm-3 .front img {
  padding: 10px 5px 5px 10px !important;
  width:100%!important;
}

.col-sm-3{
padding:0px!important;
}

＆＃13;

<div class="form-group">
  <div class="col-lg-3 col-sm-3">
    <div class="front">
      <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRE1_PJ6L1IQVa2v6Xd1G7vypRQbQmCKGTq0TkMNJmMHFPm-hvKYA" alt="messi">
    </div>
  </div>
  <div class="col-lg-3 col-sm-3">
    <div class="front">
      <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRE1_PJ6L1IQVa2v6Xd1G7vypRQbQmCKGTq0TkMNJmMHFPm-hvKYA" alt="messi">
    </div>
  </div>
  <div class="col-lg-3 col-sm-3">
    <div class="front">
      <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRE1_PJ6L1IQVa2v6Xd1G7vypRQbQmCKGTq0TkMNJmMHFPm-hvKYA" alt="messi">
    </div>
  </div>
  <div class="col-lg-3 col-sm-3">
    <div class="front">
      <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRE1_PJ6L1IQVa2v6Xd1G7vypRQbQmCKGTq0TkMNJmMHFPm-hvKYA" alt="messi">
    </div>
  </div>

  <div class="col-lg-3 col-sm-3">
    <div class="front">
      <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRE1_PJ6L1IQVa2v6Xd1G7vypRQbQmCKGTq0TkMNJmMHFPm-hvKYA" alt="messi">
    </div>
  </div>
  <div class="col-lg-3 col-sm-3">
    <div class="front">
      <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRE1_PJ6L1IQVa2v6Xd1G7vypRQbQmCKGTq0TkMNJmMHFPm-hvKYA" alt="messi">
    </div>
  </div>
  <div class="col-lg-3 col-sm-3">
    <div class="front">
      <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRE1_PJ6L1IQVa2v6Xd1G7vypRQbQmCKGTq0TkMNJmMHFPm-hvKYA" alt="messi">
    </div>
  </div>
  <div class="col-lg-3 col-sm-3">
    <div class="front">
      <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRE1_PJ6L1IQVa2v6Xd1G7vypRQbQmCKGTq0TkMNJmMHFPm-hvKYA" alt="messi">
    </div>
  </div>

</div>

＆＃13;

Answer 3

如果您查看了自己的标记，那么您使用的是带有col-lg-3类的div元素，其中包含您的img标记。

放置：

.col-lg-3 {
  display: inline-block;
  margin: 3px;
  padding: 3px;
}

在这个div类上，它应该适合你。

图像每行显示一个原因是由于div元素默认为display: block声明。通过设置inline-block来覆盖它将允许每行多个图像（如果屏幕宽度允许）。

快速演示将是：

＆＃13;

img {
  height: 300px;
}
.col-lg-3 {
  display: inline-block;
  margin: 3px;
  padding: 3px;
}

＆＃13;

<div class="form-group">
  <div class="col-lg-3">
    <div class="front">
      <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRE1_PJ6L1IQVa2v6Xd1G7vypRQbQmCKGTq0TkMNJmMHFPm-hvKYA" alt="messi" />
    </div>
  </div>
  <div class="col-lg-3">
    <div>
      <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRE1_PJ6L1IQVa2v6Xd1G7vypRQbQmCKGTq0TkMNJmMHFPm-hvKYA" alt="messi" />
    </div>
  </div>
  <div class="col-lg-3">
    <div>
      <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRE1_PJ6L1IQVa2v6Xd1G7vypRQbQmCKGTq0TkMNJmMHFPm-hvKYA" alt="messi" />
    </div>
  </div>
  <div class="col-lg-3">
    <div>
      <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRE1_PJ6L1IQVa2v6Xd1G7vypRQbQmCKGTq0TkMNJmMHFPm-hvKYA" alt="messi" />
    </div>
  </div>

  <div class="col-lg-3">
    <div>
      <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRE1_PJ6L1IQVa2v6Xd1G7vypRQbQmCKGTq0TkMNJmMHFPm-hvKYA" alt="messi" />
    </div>
  </div>
  <div class="col-lg-3">
    <div>
      <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRE1_PJ6L1IQVa2v6Xd1G7vypRQbQmCKGTq0TkMNJmMHFPm-hvKYA" alt="messi" />
    </div>
  </div>
  <div class="col-lg-3">
    <div>
      <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRE1_PJ6L1IQVa2v6Xd1G7vypRQbQmCKGTq0TkMNJmMHFPm-hvKYA" alt="messi" />
    </div>
  </div>
  <div class="col-lg-3">
    <div>
      <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRE1_PJ6L1IQVa2v6Xd1G7vypRQbQmCKGTq0TkMNJmMHFPm-hvKYA" alt="messi" />
    </div>
  </div>

</div>

＆＃13;

如何在图像之间创建空间？

3 个答案: