Hva Er Margin i en H1 tag?

H1 tagger hjelpe deg legge til beskrivende overskrifter til websider og lage profesjonelle nettsteder. Du kan farge overskrifter, endre sine skriftstiler og kontrollere plass rundt dem ved å justere sine margverdier. Site designere ofte finpusse h1 koder for å oppnå akkurat den rette visuelle utforming de ønsker. Du kan gjøre det samme ved å lære hvordan å manipulere h1 tag marginer.

Blokk-nivå tagger

Bilder, divs og overskrifter deler minst en felles egenskap; de er alle blokk-nivå elementer som befinner seg inne i virtuelle bokser. Følgende h1 tag definerer en typisk overskrift du kan finne på en webside:

<H1> Overskrift </ h1>

Hvis du skriver ut på siden og tegne en boks rundt ordet "Overskrift", plassen utenfor boksen representerer margin. Plassen inne i boksen som ligger mellom ord og boksen er overskriften er padding. Du har muligheten til å endre en overskrift margin uten å påvirke padding.

Innstilling H1 Marginene

Bruk Cascading Style Sheets å angi egenskapene til nettsideelementer. Følgende eksempel illustrerer en h1 tag og to mulige måter å sette sine marginer ved hjelp av CSS:

<H1> Overskrift </ h1>
h1 {margin: 2px 3px 4px 5px;}
h1 {margin: 20px}

Den første h1 CSS velgeren endrer toppen, til høyre, nederst og venstre marg på alle overskrifter til 2, 3, 4 og 5 piksler. Den andre velger bruker stenografi å endre disse fire margverdiene til 20 piksler. Hvis du ikke angir en overskrift margin, nettlesere gjør det for deg å bruke standardinnstillingene. Den verdien som brukes avhenger av nettleseren.

Block-Level Element Spacing

Blokk-nivå elementer, for eksempel overskrifter, bor på egne linjer i en nettleser. Når en blokk-nivå element vises under en annen, nettlesere legge toppen elementets bunnmargen verdi og bunnen elementets toppmargen verdien til å bestemme den vertikale avstanden mellom dem. En nettleser bruker i stedet verdien av de største margin som den vertikale avstanden mellom de to elementer. Husk dette prinsippet, spesielt når elementer som bilder under overskrifter ikke stille opp på den måten du tror de burde.

Tips

Når du trenger elementer under en overskrift for å flytte nærmere den, bruker en negativ verdi for sin bunnmargen som vist nedenfor:

h1 {margin: -10px}

Du må kanskje eksperimentere med denne verdien for å finne antall som flytter innhold under overskriften til det stedet du ønsker. Øk den vertikale avstanden mellom en overskrift og elementer under det ved å øke overskriften bunnen margin verdi. Site designere også bruke h2, h3, h4, h5 og H6-koder for å skape overskrifter. Ettersom antallet i en brikkenes navn øker, får sin overskrift mindre. Bruk samme CSS-regler for å justere marginer på disse kodene også.