Question

我把6张图像放在一个矩形的形状中，一个像这样保持在另一个旁边 my home page

所有图像，如汽车移动和所有。我希望看到它们之间有一定的空间，因为我想在各种类别的图像上做一些悬停和其他东西，并且对于那些图像需要看起来很少分开（为了更好的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>

和我在这里使用的其他样式表是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

Answer 2

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

   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 3

CSS

   div.jumbotron img {
        padding:5px; 
    }

DEMO

Answer 4

您可以根据需要使用margin属性或padding属性来提供顶部，底部，左侧，右侧空间。

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

或

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

如何在这些图像之间给出间距

4 个答案: