html - how to give spacing between these images -
i have put 6 images in rectangle form 1 kept next
all images car mobile , all. want see them amount of space between them,because want hover , other stuff on images various categories , images needs little separated(for better ui).my div section covers blue area see having categories inside them :
<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 using here bootstrap.min.css(for jumbotron ,available on link :http://getbootstrap.com/). how give spacing ?any ideas?
css margin property this.
you can try this:
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
Comments
Post a Comment