Hvordan lage Border Space i en CSS bilde

Legge plass mellom en ramme og et bilde er oppnådd ved bruk av "padding" eiendom i Cascading Style Sheets (CSS) kode. Når du oppretter en klasse for bildet, kan du bruke det for andre bilder på nettstedet ditt og skrive CSS-kode for å skape den ønskede effekt. Gi klassen padding og border, og deretter legge til en bakgrunnsfarge hvis du ønsker å legge farge til rommet mellom bildet og den grensen.

Bruksanvisning

1 Åpne filen for din webside som inneholder bildet i Notepad eller en kode editor. Finn "<img>" tag for bildet der du vil opprette grensen plass:

<Img alt = "Mitt bilde" />

Legg et klassenavn i bildet:

<Img alt = "Mitt bilde" class = "myborder" />

2 Gå til "<head>" koder av filen din og se etter "<style>" tags. Legg disse kodene hvis du ikke finner dem der:

<Style type = "text / css">

</ Style>

3 Skriv din CSS-kode mellom "<style>" tags. Target bildet ved sin klasse navn:

.myborder {}

4 Legg til en ramme på bildet ditt ved hjelp av "grensen" tilhører CSS:

.myborder {

border: 1px solid #bbb;

}

Ovennevnte kode oppretter en 1-piksel-bred, solid ramme av en middels grå farge.

5 Still "padding" eiendom CSS i bildet for å lage plass mellom grensen og bilde:

.myborder {

border: 1px solid #bbb;

padding: 10px;

}

Hint

  • Legg en bakgrunnsfarge i bildet for å gi plass mellom grensen og bildet en farge.
  • Legg inn et klassenavnet til et annet bilde der du ønsker å bruke denne effekten. Fordelen med klasser i HTML og CSS er at du kan bruke dem så mange ganger du vil.