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.