CODEWITHSUNDEEP
htmlcss
Nigel
Nigel

Reputation: 33

adding space between images

How can I add some space to the following images Meaning that I want horizontal space in between the following images

<p class="menusomething">In-game Imagery</br>
<a href="R.jpg"><img src="age1.jpg" width="200" height="150"/>          </a></br>
<a href="Re2.jpg"><img src="age2.jpg" width="200" height="150"/>   </a></BR>
<a href="Ri.jpg"><img src="Re3.jpg" width="200" height="150"/></a></BR>
<a href="Ri4.jpg"><img src="e4.jpg" width="200" height="150"/></a></BR>
</p>

and the css code

p.menusomething{background: white;
   margin: auto;
   margin-top: 200px;
   margin-left: 10px;
   padding: 10px;
   width: 200px;}

Upvotes: 3

Views: 126002

Answers (6)

Ritika Sharma
Ritika Sharma

Reputation: 97

.menusomething > img:not(:last-child){
  margin-bottom: 28px; // if images are aligned vertically
  margin-right: 28px; // if images are aligned horizontally
}

Upvotes: -1

sadeq alshaar
sadeq alshaar

Reputation: 683

add hspace="20" for a foto's

<p class="menusomething">In-game Imagery</br>
<a href="R.jpg"><img src="age1.jpg" width="200" height="150" hspace="20" />          </a></br>
<a href="Re2.jpg"><img src="age2.jpg" width="200" height="150" hspace="20" />   </a></BR>
<a href="Ri.jpg"><img src="Re3.jpg" width="200" height="150" hspace="20" /></a></BR>
<a href="Ri4.jpg"><img src="e4.jpg" width="200" height="150" hspace="20" /></a></BR>
</p>

Upvotes: 4

Praveen Vijayan
Praveen Vijayan

Reputation: 6761

.menusomething img {
 display:block;
 margin:10px 0 10px 0;
}

Upvotes: 0

Mohammed Swillam
Mohammed Swillam

Reputation: 9242

you were targeting the container of your images, not the images themselves. to fix this, simply add any of the following CSS lines to your file

p.menusomething a>img
{
   margin-top:20px; /*to have the space above the image*/
   margin-bottom:20px; /*to have the space under the image*/
}

just one of them should do the job, let me know if this is what you need.

check this Live demo for more details: http://jsfiddle.net/3jApT/3/

Upvotes: 7

CompanyDroneFromSector7G
CompanyDroneFromSector7G

Reputation: 4517

p.menusomething img 
{
    margin-bottom:10px;
}

Upvotes: 0

Dejan.S
Dejan.S

Reputation: 19118

p.menusomething a img {
margin: 0 10px 0 0;
}

Upvotes: 1

Related Questions