how to give spacing between these images

i have put 6 images in a rectangle form one kept next to another somewhat like this

all the images like car mobile and all. i want to see them with some amount of space between them,because i want to do some hover and other stuff over the images for various categories and for that images needs to look little separated(for better UI).my div section which covers the blue area you see having categories inside them is :

<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>

and other style sheet i am using here is bootstrap.min.css(for jumbotron ,available on their link :http://ift.tt/PPrDZs). how to give spacing ?any ideas?