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;}
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With