Avstanden mellom Text & border i CSS

Hvert element i CSS har sine egne verdier og egenskaper. Ved hjelp av CSS, kan en webdesigner bruke et bredt utvalg av visuelle effekter og oppsett til elementer, bygg forskjellig utseende og formater. En grunnleggende verktøyet tilgjengelig for en designer er bruken av grenser, visuelt skille elementer for enkel navigering eller forståelse. Å kunne styre avstand og plassering av en ramme rundt et element krever forståelse av padding og dets bruk i CSS.

Box Model

Elementer i CSS følge boksen modell. I utgangspunktet, blir hver komponent av et element innpakket i komponenten over den, slik at mindre og mindre bokser. Dette betyr at margene omgir grensen, som omgir polstring, som omgir innholdet av elementet. Etter at boksen modellen, avstanden mellom innholds - er, og grensen av elementet padding - slik som tekst. Øke avstanden mellom tekst og en kant gjøres ved å angi en verdi for utfylling av et element.

Legge

Et element er padding kan defineres på samme måte som marginer og, til en viss grad, grenser. Legg til "padding:" etterfulgt av lengden og en avsluttende semikolon for å fullføre linjen. For eksempel, et element med en utfylling på 15 piksler på alle fire sider har "padding: 15px", som inngår i elementets egenskaper. Akkurat som margin og grenser, kan alle fire sider av padding bli erklært individuelt og gitt forskjellige verdier. Et element uten topp og bunn padding, men venstre og høyre padding, har linjen "padding: 0px 15px 0px 15p;" eller "padding: 0px 15px;" ved hjelp av stenografi. I det første eksemplet, begynner erklæringen med topp padding og arbeider seg med klokken; de andre gruppene i topp og bunn i den første verdien og den venstre og høyre i den andre. Enten skjemaet er korrekt.

Bruk

Padding brukes til å sette avstanden mellom innholdet av et element, for eksempel tekst eller et bilde, og den faktiske grensen. Dette kan brukes til å angi bredden av en kant-innpakket elementet slik at den ikke er begrenset til lengden av innholdet. Den ene siden av padding for et element kan bli skjøvet ut lenger enn de andre, og kombinert med en ramme på den siden, og skaper en fin, enkel, skillet mellom elementer i en liste. Bruk padding som et annet verktøy for å organisere og legge ut elementer på en nettside.

Forskjell

Hvis en grense ikke vises visuelt rundt et element, kan det være vanskelig å skille padding fra marginer. Hovedforskjellen mellom de to er at grensen markerer kanten av elementet. Fordi marginene ligger på den andre siden av grensen, blir de betraktet utenfor elementet. Polstring på den annen side anses fremdeles inne i elementet, effektivt øker elementets totale størrelse. Dette er viktig særlig ved en bakgrunnsfarge eller et bilde til et element. Hvis en margin blir brukt, stopper bakgrunn på grensen, mens polstring strekker bakgrunnen ut langs hele sin lengde.