html - 如何给这些图像之间的间距

Question

我把 6 张图片放在一个矩形中，一张挨着一张，有点像这样

所有图像，如汽车移动等等。我想看到它们之间有一定的空间，因为我想在不同类别的图像上做一些悬停和其他东西，并且图像需要看起来很少分开(为了更好的用户界面)。我的 div 部分涵盖了你看到里面有类别的蓝色区域是:

<div class="jumbotron">
   <h1>categories</h1>
         <p>
            <img class="book" src="book_main.jpg" alt="book face" style="float:top;width:150px;height:130px" href="">
              <img class="mobiles"src="mobile_main.jpg" alt="mobiles face" style="float:left;width:150px;height:130px" href="">
              <img class="vehicles"src="vehicle_main.jpg" alt="vehicles face" style="float:left;width:150px;height:130px" href=""><br>
              <img class="animals"src="animals_main.jpg" alt="animals face" style="float:left;width:150px;height:130px" href="">
              <img class="jobs"src="jobs_main.jpg" alt="jobs face" style="float:left;width:150px;height:130px" href="">
              <img class="furniture"src="furniture_main.jpg" alt="furniture   face" style="float:left;width:150px;height:130px" href=""><br>
         </p>
  </div>

我在这里使用的其他样式表是 bootstrap.min.css(对于 jumbotron，可在其链接上找到:http://getbootstrap.com/)。如何给出间距？有什么想法吗？

Answer 1

CSS 边距属性就是这样做的。

你可以试试这个:

img{
    margin:10px;
}

<div class="jumbotron">
   <h1>categories</h1>
         <p>
            <img class="book" src="http://i.stack.imgur.com/CTyEf.jpg?s=128&g=1" alt="book face" style="float:top;width:150px;height:130px" >
              <img class="mobiles"src="http://i.stack.imgur.com/CTyEf.jpg?s=128&g=1" alt="mobiles face" style="float:left;width:150px;height:130px" >
              <img class="vehicles"src="http://i.stack.imgur.com/CTyEf.jpg?s=128&g=1" alt="vehicles face" style="float:left;width:150px;height:130px"><br>
              <img class="animals"src="http://i.stack.imgur.com/CTyEf.jpg?s=128&g=1" alt="animals face" style="float:left;width:150px;height:130px" >
              <img class="jobs"src="http://i.stack.imgur.com/CTyEf.jpg?s=128&g=1" alt="jobs face" style="float:left;width:150px;height:130px" >
              <img class="furniture"src="http://i.stack.imgur.com/CTyEf.jpg?s=128&g=1" alt="furniture   face" style="float:left;width:150px;height:130px" ><br>
         </p>
  </div>

演示 Here