CODEWITHSUNDEEP
htmlcsstwitter-bootstrapweb
Sumit Singh
Sumit Singh

Reputation: 310

how to give spacing between these images

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

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://getbootstrap.com/). how to give spacing ?any ideas?

Upvotes: 0

Views: 8678

Answers (4)

mohamedrias
mohamedrias

Reputation: 18566

A margin to the images to have some space between the images.

   div.jumbotron img {
        margin: 5px; /* adjust this based on your need */
    }

    <div class="jumbotron">
       <h1>categories</h1>
             <p>
                <img class="book" src="https://i.sstatic.net/opQJ0.jpg?s=128&g=1" alt="book face" style="float:top;width:150px;height:130px" >
                  <img class="mobiles"src="https://i.sstatic.net/opQJ0.jpg?s=128&g=1" alt="mobiles face" style="float:left;width:150px;height:130px" >
                  <img class="vehicles"src="https://i.sstatic.net/opQJ0.jpg?s=128&g=1" alt="vehicles face" style="float:left;width:150px;height:130px" href=""><br>
                  <img class="animals"src="https://i.sstatic.net/opQJ0.jpg?s=128&g=1" alt="animals face" style="float:left;width:150px;height:130px" >
                  <img class="jobs"src="https://i.sstatic.net/opQJ0.jpg?s=128&g=1" alt="jobs face" style="float:left;width:150px;height:130px" >
                  <img class="furniture"src="https://i.sstatic.net/opQJ0.jpg?s=128&g=1" alt="furniture   face" style="float:left;width:150px;height:130px" ><br>
             </p>
      </div>

Upvotes: 1

kiran
kiran

Reputation: 641

you can use margin attribute or padding attribute to give space top, bottom, left, right as you need.

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

or 

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

Upvotes: 1

user4720163
user4720163

Reputation:

CSS Margin Property simply Does This.

You Can Try This:

img{
    margin:10px;
}
<div class="jumbotron">
   <h1>categories</h1>
         <p>
            <img class="book" src="https://i.sstatic.net/CTyEf.jpg?s=128&g=1" alt="book face" style="float:top;width:150px;height:130px" >
              <img class="mobiles"src="https://i.sstatic.net/CTyEf.jpg?s=128&g=1" alt="mobiles face" style="float:left;width:150px;height:130px" >
              <img class="vehicles"src="https://i.sstatic.net/CTyEf.jpg?s=128&g=1" alt="vehicles face" style="float:left;width:150px;height:130px"><br>
              <img class="animals"src="https://i.sstatic.net/CTyEf.jpg?s=128&g=1" alt="animals face" style="float:left;width:150px;height:130px" >
              <img class="jobs"src="https://i.sstatic.net/CTyEf.jpg?s=128&g=1" alt="jobs face" style="float:left;width:150px;height:130px" >
              <img class="furniture"src="https://i.sstatic.net/CTyEf.jpg?s=128&g=1" alt="furniture   face" style="float:left;width:150px;height:130px" ><br>
         </p>
  </div>

Demo Here

Upvotes: 2

Kawinesh S K
Kawinesh S K

Reputation: 3220

CSS 

   div.jumbotron img {
        padding:5px; 
    }

DEMO

Upvotes: 1

Related Questions