Sådan oprettes Space Between billeder på et webside

Korrekt billede afstand vil støtte den visuelle strøm af indholdet på dine websider. ronstik / iStock / Getty Images

Medmindre du specifikt tilføje den korrekte HTML-kode, vil et billede på din webside har ingen rendestenen afstand mellem den og alle andre billede.CSS eller Cascading Style Sheet, vil margin ejendom tilføje plads omkring alle fire sider af et billede.Desuden vil de vspace og hspace img tag attributter tilføje lodret og vandret afstand omkring dine billeder, hhv.Endelig, hvis du indeholder hvert billede i en separat div afsnit vil CSS polstring ejendom indsætte mellemrum mellem dem, så godt.

Tilføj Space Med margen Ejendom

  1. Type "& lt; style type =" text / css "& gt;"på en tom linje over & lt; / head & gt;tag, skal du trykke på "Enter" to gange, og derefter skrive "& lt; / typografi & gt;"på nuværende blank linje.Placering af & lt; stil & gt;tag par i & lt; head & gt;afsnit af din webside opretter en intern typografiark.Brugerdefinerede CSS er indeholdt i & lt; stil & gt;og & lt; / typografi & gt;mærkepar.For eksempel HTML-koden i &

    lt; head & gt;sektion skal ligne følgende:

    & lt; style type = "text / css" & gt;

    & lt; / typografi & gt;
    & lt; / head & gt;

  2. Skriv CSS kode for at tilføje margener omkring alle websider billeder.For eksempel, hvis du ønsker at omgive billeder med en 10px margin, skal din CSS stil kode ligner følgende:

    & lt; style type = "text / css" & gt;
    img {margin: 10px}
    & lt; / typografi & gt;
    & lt; / head & gt;

    En 10px margin vil blive vist på toppen, højre, bund og venstre side af hvert billede din webside indeholder.

  3. Gem dine ændringer og få vist websiden i din browser.CSS koden for en intern stil vil kun gælde for den webside, som den er tilføjet.Hvis du vil have marginerne skal vises på alle billeder på tværs af hele din hjemmeside, tilføje CSS kode til en ekstern typografiark fil og tilføje et link til filen på hver webside.

    Hvis du ønsker at tilføje plads til bestemte billeder på en webside i stedet for alle billeder, skal du bruge en in-line stil snarere end en intern eller ekstern stil.For eksempel, hvis du ønsker at tilføje 10px afstand mellem fire forskellige billeder på en bestemt side, skal din kode ligne følgende:

    & lt; img src = "img1.jpg" style = "margin: 10px" & gt;
    & lt; img src = "img2.jpg" style = "margin: 10px" & gt;
    & lt; img src = "img3.jpg" style = "margin: 10px" & gt;
    & lt; img src = "img4.jpg" style = "margin: 10px" & gt;

Tilføj vspace og hspace

  1. Indtast vspace attribut for hvert billede, du vil indsætte plads over og under.For eksempel, hvis du ønskede en 10px, vertikal tagrende på dine billeder, bør koden inden for hver img tag ligne følgende:

    & lt; img src = "img1.jpg" vspace = "10" & gt;

  2. Indtast hspace attribut for hvert billede, som du ønsker at tilføje vandret plads.Hvis du ønskede en 20 pixel tagrende til venstre og højre for dine billeder, bør koden inden hvert billede tag ligne følgende:

    & lt; img src = "img1.jpg" vspace = "10" hspace = "20"& gt;

  3. Gem dine ændringer og få vist websiden i din browser.Mens vspace og hspace er ikke en del af HTML5-standarden, browsere som Firefox, Chrome og Internet Explorer stadig støtter attributterne.

Pad Images Inside divs

  1. Type "& lt; div & gt;"før og "& lt; / div & gt;"efter hvert billede tag du ønsker at tilføje mellemrum mellem.For eksempel, hvis du arbejder med fire billeder, vil din kode se ud som følgende:

    & lt; div & gt; & lt; img src = "img1.jpg" & gt; & lt; / div & gt;
    & lt; div & gt; & lt; img src = "img2.jpg" & gt; & lt; / div & gt;
    & lt; div & gt; & lt; img src = "img3.jpg" & gt; & lt; / div & gt;
    & lt; div & gt; & lt; img src = "img4.jpg" & gt; & lt; / div & gt;

  2. Indtast CSS stil inden for div tags, der vil tilføje en polstring omkring hvert billede.For eksempel, hvis du har brug for at omgive hvert billede med en 20px tagrende plads, bør den stil ligne følgende: (Se henvisning 4)

    & lt; div style = "padding: 20px" & gt; & lt; img src = "img1.jpg "& gt; & lt; / div & gt;
    & lt; div style = "padding: 20px" & gt; & lt; img src = "img2.jpg" & gt; & lt; / div & gt;
    & lt; div style = "padding: 20px" & gt; & lt; img src = "img3.jpg" & gt; & lt; / div & gt;
    & lt; div style = "padding: 20px" & gt; & lt; img src = "img4.jpg" & gt; & lt; / div & gt;

    Polstringen ejendom vil tilføje rum i div til toppen, højre, bund og venstre side af billederne.

  3. Gem dine ændringer og få vist websiden i din browser.

Tips & amp;Advarsler

  • Oprette en tabel til at indeholde dine billeder og tilføje cellspacing attribut til bordet tag for at kontrollere mængden af ​​plads mellem de enkelte celler.For eksempel, hvis du ønsker at tilføje en 20px plads omkring hvert billede, skal tabellen tag kode ligne følgende:
  • & lt; table cellspacing = "20" & gt;
  • For at fjerne de linjer, der omgiver hver tabelcelle, tilføje følgende attribut (med anførselstegn) til bordet tag:
  • border = "0"
  • Eksempel dit websted ved hjælp af forskellige browsere og på forskelligemobile enheder.Foretag justeringer til dit billede afstand, så så mange seere som muligt vil være i stand til at se dit arbejde den måde du havde tænkt dig.

Ressourcer

  • W3Schools: CSS Margin
  • W3Schools: HTML & lt; img & gt;Hspace Attribut
  • W3Schools: HTML & lt; img & gt;Vspace Attribut
  • W3Schools: CSS Padding
  • W3Schools: HTML & lt; bord & gt;Cellspacing Attribut
133
0
1
Webdesign