adăugarea de spațiu între imagini (Programare, Html, Css)

Nigel a intrebat.

Cum pot adăuga spațiu la următoarele imagini Înseamnă că vreau spațiu orizontal între următoarele imagini

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

și codul css

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

6 răspunsuri
Mohammed Swillam

vizați containerul imaginilor dvs., nu imaginile în sine. pentru a rezolva acest lucru, pur și simplu adăugați oricare dintre următoarele linii CSS la fișierul dvs.

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

doar una dintre ele ar trebui să facă treaba, anunțați-mă dacă asta este ceea ce aveți nevoie.

verificați acest demo live pentru mai multe detalii: http://jsfiddle.net/3jApT/3/

Comentarii

  • mă bucur să aud asta, vă rugăm să luați în considerare să marcați ca răspuns dacă v-a rezolvat problema, mulțumesc. –  > Por Mohammed Swillam.
Dejan.S
p.menusomething a img {
margin: 0 10px 0 0;
}

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

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

sadeq alshaar

adăugați hspace=”20″ pentru o fotografie

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

Ritika Sharma

afișare: flex;

justify-content: space-between;

Comentarii

  • Acesta ar trebui să fie un răspuns? –  > Por Zsolt Meszaros.

Tags:,