Hur man sätter in ett utrymme mellan en bild och text i HTML och CSS

February 8

Sätta åtminstone några pixlar i utrymmet mellan en bild och texten som omger den gör för en mindre rörig layout och text som är lättare att läsa. Du kan styra utrymmet mellan kanten på en bild och texten som omger den ända ner till pixel med hjälp av CSS, eller Cascading Style Sheet "marginal" attribut. Eller, kan du infoga detta attribut rakt in i bildens HTML-taggen i stället. Du kan ange en marginal storlek för alla fyra sidorna av de grafiska eller list olika marginaler för varje sida.

Instruktioner

1 Öppna filen eller webbsida med HTML-koden för din bild och text. Leta reda på bildens HTML-tagg, som börjar med "<IMG".

2 Skriv följande attribut i IMG-taggen:

style = "margin: 10px;"

Till exempel kan din IMG-taggen se ut så här:

<IMG style = "margin: 10px;">

Ändra nummer 10 till något annat nummer som du väljer. Detta skapar samma mängd utrymme på alla fyra sidor av bilden.

3 Skriv följande i IMG-taggen för att ange olika marginaler för varje sida:

style = "margin-left: 10px; margin-höger: 10px; margin-top: 10px; margin-bottom: 10px;"

Ändra varje nummer till önskad marginal storlek.

4 Spara eller publicera din sida.

Tips

  • I stället för pixlar ( "px") kan du också definiera en marginal i enheter om dem. En em är ett lika antal poäng till storleken på det aktuella teckensnittet. Till exempel, om din totala teckenstorleken om 12 poäng, är en em 12 poäng.
  • Du kan ange flera marginaler i stenografi med följande kod:
  • style = "margin: 10px 2px 5px 17px;"
  • Den första siffran hänvisar till övre marginalen och sedan flyttar medurs (höger, botten, vänster).

        

Välkommen till dig för att skicka en kommentar:

            
            
            
            

© 2020 Astrixsoft.com | Contact us: webmaster# astrixsoft.com