| << Typografiark menu |
En ting der virkelig hjælper med til at forstå brugen af typografiark er forståelse af boks-elementet.
Alt det du indsætter i dit HTML dokument er omgivet af en mere eller mindre synlig boks. Denne boksen er mest synlig i forbindelse med tabeller, men er også tilstede ved alle andre elementer.
Når man vha. typografiark indsætter en kant om et element, lægger man faktisk bare farve på en allerede eksisterende kant, idet kanten er til stede hvad endten du ser den eller ej.
Boksen består yderst af en margen, dernæst en kant og inderst kommer indhold og fyld, som illustreret her:
Her er to overskrifter oprettet vha. <H1>:
Man kan nu vælge hvordan overskrifternes kanter skal vises vha. egenskaberne border-style og border-color.:
Man kan også farve fyldet vha. background-color
Herunder farves indholdet sort med egenskaben color:
Du kan nu sammenholde de to overskrifter med boks-illustrationen øverst på siden. Den del af boksen du ikke umiddelbart ser, er margen. Som du kan se, er der stadig en afstand mellem de to overskrifter, og det er margen.
En anden ting der måske kan undre, er at boksen fylder hele linien selv om teksten kun fylder ca. det halve. Det er fordi at <H1> er en kode på block niveau og den boks der omgiver koder på block niveau vil i de fleste tilfælde altid fylde en hel linie.
Lad os derfor også se på den boks der omgiver en kode på inline niveau, som f.eks. <B> (fed skrift).
I ovenstående er den fede skrift formateret på nøjagtig samme måde som blev benyttet på overskriften tidligere. Men bemærk nu at boksen kun fylder hvad der svarer til indholdet.
Hvis man ikke bryder sig om den overflødige plads der opstår når man
viser boksen på et element på block niveau, kan man manipulere bredden
med egenskaben width. Og samtidig ville det jo så også pynte at sætte teksten i midten med text-align:
Du har også mulighed for at sætte afstand fra indhold til kant med padding: