如何給這些圖像

我已經把6幅圖像在明年保持到另一個長方形的形式有些一個像這樣的 my home page 如何給這些圖像

所有圖像像車載移動和所有之間的間距。我希望看到它們之間有一定的空間，因爲我想對圖像中的各種類別進行懸停和其他操作，並且圖像需要看起來很小（爲了更好的UI）。藍色區域你看到有類別裏面他們是：

<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（用於超大屏幕，其鏈路上可用：http://getbootstrap.com/）。如何給間距？任何想法？

來源

2015-04-01 SUMIT KUMAR SINGH

'href'爲'img'從未見過一個 – 2015-04-01 06:19:37

如果在IMG用戶點擊我有一個新的頁面加載到.. @VitorinoFernandes – 2015-04-01 07:14:44

那麼你就應該在包裝''在單獨的''標籤中。你的代碼無效。 – Lee 2015-04-01 07:39:36

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

來源

2015-04-01 06:19:45

圖像的邊緣在圖像之間留有一定的空間。

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>

來源

2015-04-01 06:18:47 mohamedrias

CSS

div.jumbotron img { 
     padding:5px; 
    }

DEMO

來源

2015-04-01 06:22:46

您可以使用margin屬性或padding屬性根據需要給出空間頂部，底部，左側，右側。

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

或

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

來源

2015-04-01 06:26:38 kiran

如何給這些圖像

回答

相關問題