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

Question

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

所有图像，如汽车移动等等。我想看到它们之间有一些 space，因为我想在不同类别的图像上做一些悬停和其他东西，并且图像需要看起来很少分开（为了更好 UI ).my 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>

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

Answer 1

图像的边距，图像之间有一些 space。

   div.jumbotron img {
        margin: 5px; /* adjust this based on your need */
    }

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

Answer 2

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

Answer 3

CSS

   div.jumbotron img {
        padding:5px; 
    }

DEMO

Answer 4

您可以根据需要使用 margin 属性或 padding 属性 space 上、下、左、右。

.jumbotron img {
    margin-right: 8px;
    margin-bottom: 5px;
}

或

.jumbotron img {
    padding-right: 8px;
    padding-bottom: 5px;
}

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

how to give spacing between these images

html

css

web

twitter-bootstrap