Hvordan sette inn et mellomrom mellom et bilde og tekst i HTML og CSS

Sette inn minst et par piksler plass mellom et bilde og teksten som omgir det gjør for en mindre rotete layout og tekst som er lettere å lese. Du kan kontrollere avstanden mellom kanten av et bilde og teksten som omgir den rett ned til pixel hjelp av CSS, eller Cascading Style Sheet, "margin" attributt. Eller du kan sette dette attributtet rett inn i bildets HTML-kode i stedet. Du kan spesifisere en margin størrelse på alle fire sider av grafiske eller liste ulike marginer for hver side.

Bruksanvisning

1 Åpne filen eller webside som inneholder HTML-koden for bilde og tekst. Finn bildet HTML kode, som begynner med "<IMG".

2 Skriv inn følgende attributt inne i IMG tag:

style = "margin: 10px;"

For eksempel kan IMG tag se slik ut:

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

Endre nummer 10 til et annet nummer som du selv velger. Dette skaper like mye plass på alle fire sidene av bildet.

3 Skriv inn følgende i IMG-koden for å angi forskjellige marger for hver side:

style = "margin-left: 10px; margin-right: 10px; margin-top: 10px; margin-bottom: 10px;"

Endre hvert nummer til ønsket margin størrelse.

4 Lagre eller publisere siden din.

Hint

  • I stedet for piksler ( "px") kan du også definere en margin på i enheter på dem. En em er like mange poeng til størrelsen på den aktuelle skriften. For eksempel, hvis din generelle skriftstørrelsen hvis 12 poeng, er en em 12 poeng.
  • Du kan angi flere marginer i stenografi med følgende kode:
  • style = "margin: 10px 2 piksler 5px 17px;"
  • Det første tallet angir toppmargen og flytter med klokken (til høyre, nederst, venstre).