Hoe te Space Between afbeeldingen op een webpagina

Juiste afbeelding afstand zal de visuele stroom van de inhoud te helpen op uw webpagina Ronstik / iStock / Getty Images

Tenzij u specifiek voeg de juiste HTML-code, zal een beeld op uw webpagina geen dakgoot afstand tussen hem en een andere afbeelding hebben.De CSS of Cascading Style Sheet, zullen marge woning ruimte toe rond alle vier zijden van een beeld.Daarnaast zal de vspace en hspace img tag attributen verticale en horizontale afstand toe te voegen rond uw afbeeldingen, respectievelijk.Tot slot, als u elke afbeelding in een aparte div sectie bevat, zal de CSS-eigenschap padding voegen afstand tussen hen, evenals.

Space Met marge Property

  1. Type "& lt; style type =" text / css "& gt;"op een lege regel boven de & lt; / head & gt;tag, druk op "Enter" twee maal, en typ "& lt; / style & gt;"op de huidige lege regel.Het plaatsen van de & lt; stijl & gt;tag paar in het & lt; head & gt;gedeelte van uw webpagina creƫert een interne style sheet.Aangepaste CSS-stijlen zijn opgenomen in de & lt; stijl & gt;en & lt; / style & gt;tag paar.Bijvoorbeeld, de

    HTML-code in het & lt; head & gt;deel moet de volgende lijken:; style type = "text / css" & gt

    & lt;

    & lt; / style & gt;
    & lt; / head & gt;

  2. Typ de CSS-code om de marges toe rond alle webpagina beelden.Bijvoorbeeld, als je wilt om beelden te omringen met een marge van 10px, uw CSS code moet het volgende lijken:; style type = "text / css" & gt

    & lt;
    img {margin: 10px}
    & lt; / style & gt;
    & lt; / head & gt;

    Een 10px marge wordt weergegeven op de top, rechts, onder en links van elke afbeelding van uw webpagina bevat.

  3. Sla uw wijzigingen en een voorbeeld van de webpagina in uw browser.De CSS-code voor een interne stijl zal alleen van toepassing op de webpagina waarop het wordt toegevoegd.Als u wilt dat de marges op alle afbeeldingen in uw hele website, voeg de CSS-code naar een extern style sheet-bestand en voeg een link naar het bestand op elke webpagina.

    Als u ruimte wilt toevoegen aan specifieke beelden op een webpagina in plaats van alle afbeeldingen, gebruik dan een in-line stijl in plaats van een interne of externe stijl.; Img src = "img1.jpg" style = "margin: 10px"

    & lt: Bijvoorbeeld, als je wilt 10px afstand toe te voegen tussen de vier verschillende beelden op een bepaalde pagina, de code moet het volgende lijken & 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;

toevoegen vspace en hspace

  1. Typ de vspace attribuut voor elke afbeelding die u wilt invoegen ruimte boven en onder.Bijvoorbeeld, als u een 10px, verticale goot op uw foto's wilde, de code binnen elke img tag moet er als volgt uitzien:

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

  2. Typ de hspace attribuut voor elke afbeelding die u wilt horizontale ruimte toe te voegen.Als je een 20 pixel goot links en rechts van uw foto wilde, zou de code binnen elk beeld tag er als volgt uitzien:

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

  3. Sla uw wijzigingen en een voorbeeld van de webpagina in uw browser.Terwijl vspace en hspace zijn geen onderdeel van de HTML5-standaard, browsers zoals Firefox, Chrome en Internet Explorer ondersteunen nog steeds de attributen.

Pad Beelden Binnen Divs

  1. Type "& lt; div & gt;"voor en "& lt; / div & gt;"na elke afbeelding tag u ruimte wilt toevoegen tussen.Bijvoorbeeld, als u werkt met vier verschillende beelden, zal de code er als volgt uitzien:

    & 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. Typ de CSS-stijl binnen de div tags die een opvulling zal toevoegen rond elke afbeelding.& Gt; & lt; img src = "img1:; div style =" 20px padding "(Zie referentie 4)

    & lt: bijvoorbeeld als je nodig hebt om elk beeld met een 20px goot ruimte omringen, de stijl moet de volgende lijken.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;

    Het pand padding zal ruimte toe te voegen binnen de div naar boven, rechts, onder en links van de beelden.

  3. Sla uw wijzigingen en een voorbeeld van de webpagina in uw browser.

Tips & amp;Waarschuwingen

  • Maak een tabel om uw afbeeldingen bevatten en voeg het attribuut cellspacing om de tafel tag om de hoeveelheid ruimte tussen de individuele cellen te controleren.Bijvoorbeeld, als je wilde een 20px spatie toe te voegen rond elke afbeelding, de tabel tag code moet het volgende lijken:; table cellspacing = "20" & gt
  • & lt;
  • Om de lijnen rond elke tabel cel te verwijderen, voeg de volgende attribuut (met aanhalingstekens) om de tafel tag:
  • border = "0"
  • preview van uw website met verschillende browsers en op een verscheidenheid vanmobiele toestellen.Maak aanpassingen aan uw imago afstand, zodat zo veel mogelijk kijkers in staat om uw werk te zien van de manier waarop je bedoeld zal zijn.

Resources

  • W3Schools: CSS Marge
  • W3Schools: HTML & lt; img & gt;Hspace Attribute
  • W3Schools: HTML & lt; img & gt;Vspace Attribute
  • W3Schools: CSS Padding
  • W3Schools: HTML & lt; tafel & gt;Cellspacing Attribute
402
0
1
Web Design