как дать расстояние между этими изображениями

Question

я поставившие 6 изображений в виде прямоугольника, один держал рядом с другим-то вроде этого

всех изображений, как чернь автомобиля и все. Я хочу видеть их с некоторым пространством между ними, потому что я хочу делать некоторые зависания и другие вещи поверх изображений для различных категорий, и для того, чтобы эти изображения выглядели немного отделенными (для лучшего интерфейса) .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 Margin Property просто делает это.

Вы можете попробовать это:

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>

Demo 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; 
}