Indryk og margin på tekst i HTML
Margin på tekst
Margin på tekst styres med STYLE="margin: ", som er en style man kan anvende til alle typer tekstafsnit, inklusiv sidens BODY-tag. Skrevet på denne måde, specificerer man alle fire marginer i én ombæring. Hvis man ønsker det, og det kan ofte godt være en fordel i forhold til programmeringen, kan man bruge de specifikke styles til margin: margin-top, margin-bottom, margin-left og margin-right.
Når man anvender STYLE="margin: " skal man lige være lidt opmærksom på hvad man skriver.
Hvis man kun anvender én værdi, STYLE="margin:30px", er det værdien som tildeles alle fire marginer.
Hvis man anvender to værdier, STYLE="margin:30px 40px", er den første værdi som tildeles top- og bundmargin, og den anden værdi er højre og venstre margin, dvs. marginerne er parvis ens.
Hvis man anvender tre værdier, STYLE="margin:30px 40px 20px", er den første værdi som tildeles topmargin. Den anden værdi er højre og venstre margin, dvs. disse er ens. Den tredje værdi er bundmargin. Man kan ikke med tre værdier for margin gøre det omvendte, dvs. ens top og bund og forskellig højre og venstre. Dette kræver fire værdier.
Hvis man anvender fire værdier, STYLE="margin:30px 40px 30px 50px", er den første værdi som tildeles topmargin, den anden værdi er højre margin, tredje værdi er bundmargin og fjerde værdi er venstre margin.
Bredden af margin kan, som alle andre længder, defineres i %, in, cm, mm, em, pt, pc og px efter behag. Pixels, px, er i reglen en god enhed at arbejde med, fordi man i skærmstørrelser/opløsninger tænker i pixels, og man kommer ikke i klammeri med skiftende fontstørrelser, hvis man bruger det.
Dette er de fem første afsnit af Emma Gads Takt og Tone i en DIV-tag til demonstration. Der er her anvendt STYLE="margin: 30px 20px 10px 20px":
Uden en specificeret margin ser det således ud i stedet:
Skulle man ønske det, kan man stylen godt håndtere at man blander enhederne, f.eks. STYLE="margin: 30px 20mm 10% 20em", som kommer til at se således ud:
Margin man også have negative værdier, f.eks. STYLE="margin: 30px 20px 10px -20px":
Dette bruger man f.eks. til at få indholdet af to DIV'er til at flugte på en side, selv om de iflg. programmeringen burde sidde forskudt.
Når man anvender STYLE="margin: " skal man lige være lidt opmærksom på hvad man skriver.
Hvis man kun anvender én værdi, STYLE="margin:30px", er det værdien som tildeles alle fire marginer.
Hvis man anvender to værdier, STYLE="margin:30px 40px", er den første værdi som tildeles top- og bundmargin, og den anden værdi er højre og venstre margin, dvs. marginerne er parvis ens.
Hvis man anvender tre værdier, STYLE="margin:30px 40px 20px", er den første værdi som tildeles topmargin. Den anden værdi er højre og venstre margin, dvs. disse er ens. Den tredje værdi er bundmargin. Man kan ikke med tre værdier for margin gøre det omvendte, dvs. ens top og bund og forskellig højre og venstre. Dette kræver fire værdier.
Hvis man anvender fire værdier, STYLE="margin:30px 40px 30px 50px", er den første værdi som tildeles topmargin, den anden værdi er højre margin, tredje værdi er bundmargin og fjerde værdi er venstre margin.
Bredden af margin kan, som alle andre længder, defineres i %, in, cm, mm, em, pt, pc og px efter behag. Pixels, px, er i reglen en god enhed at arbejde med, fordi man i skærmstørrelser/opløsninger tænker i pixels, og man kommer ikke i klammeri med skiftende fontstørrelser, hvis man bruger det.
Dette er de fem første afsnit af Emma Gads Takt og Tone i en DIV-tag til demonstration. Der er her anvendt STYLE="margin: 30px 20px 10px 20px":
Vær ikke snobbet.
Vær ikke vigtig.
Vær ikke underdanig.
Vær fordringsfuld overfor Dem selv men ikke overfor Andre.
Det har været mig så magtpåliggende at få nedskrevet disse grundlæggende Råd for vor Omgangstone, at de er faldet mig i Pennen, før jeg tog fat det, hvor jeg rettelig skulde begynde, nemlig med at sige, at al virkelig god Opførsel kommer indefra, udspringer naturligt fra det Sind, som er åbent for Velvilje, Forståelse og Medynk med Andre.
Vær ikke vigtig.
Vær ikke underdanig.
Vær fordringsfuld overfor Dem selv men ikke overfor Andre.
Det har været mig så magtpåliggende at få nedskrevet disse grundlæggende Råd for vor Omgangstone, at de er faldet mig i Pennen, før jeg tog fat det, hvor jeg rettelig skulde begynde, nemlig med at sige, at al virkelig god Opførsel kommer indefra, udspringer naturligt fra det Sind, som er åbent for Velvilje, Forståelse og Medynk med Andre.
Uden en specificeret margin ser det således ud i stedet:
Vær ikke snobbet.
Vær ikke vigtig.
Vær ikke underdanig.
Vær fordringsfuld overfor Dem selv men ikke overfor Andre.
Det har været mig så magtpåliggende at få nedskrevet disse grundlæggende Råd for vor Omgangstone, at de er faldet mig i Pennen, før jeg tog fat det, hvor jeg rettelig skulde begynde, nemlig med at sige, at al virkelig god Opførsel kommer indefra, udspringer naturligt fra det Sind, som er åbent for Velvilje, Forståelse og Medynk med Andre.
Vær ikke vigtig.
Vær ikke underdanig.
Vær fordringsfuld overfor Dem selv men ikke overfor Andre.
Det har været mig så magtpåliggende at få nedskrevet disse grundlæggende Råd for vor Omgangstone, at de er faldet mig i Pennen, før jeg tog fat det, hvor jeg rettelig skulde begynde, nemlig med at sige, at al virkelig god Opførsel kommer indefra, udspringer naturligt fra det Sind, som er åbent for Velvilje, Forståelse og Medynk med Andre.
Skulle man ønske det, kan man stylen godt håndtere at man blander enhederne, f.eks. STYLE="margin: 30px 20mm 10% 20em", som kommer til at se således ud:
Vær ikke snobbet.
Vær ikke vigtig.
Vær ikke underdanig.
Vær fordringsfuld overfor Dem selv men ikke overfor Andre.
Det har været mig så magtpåliggende at få nedskrevet disse grundlæggende Råd for vor Omgangstone, at de er faldet mig i Pennen, før jeg tog fat det, hvor jeg rettelig skulde begynde, nemlig med at sige, at al virkelig god Opførsel kommer indefra, udspringer naturligt fra det Sind, som er åbent for Velvilje, Forståelse og Medynk med Andre.
Vær ikke vigtig.
Vær ikke underdanig.
Vær fordringsfuld overfor Dem selv men ikke overfor Andre.
Det har været mig så magtpåliggende at få nedskrevet disse grundlæggende Råd for vor Omgangstone, at de er faldet mig i Pennen, før jeg tog fat det, hvor jeg rettelig skulde begynde, nemlig med at sige, at al virkelig god Opførsel kommer indefra, udspringer naturligt fra det Sind, som er åbent for Velvilje, Forståelse og Medynk med Andre.
Margin man også have negative værdier, f.eks. STYLE="margin: 30px 20px 10px -20px":
Vær ikke snobbet.
Vær ikke vigtig.
Vær ikke underdanig.
Vær fordringsfuld overfor Dem selv men ikke overfor Andre.
Det har været mig så magtpåliggende at få nedskrevet disse grundlæggende Råd for vor Omgangstone, at de er faldet mig i Pennen, før jeg tog fat det, hvor jeg rettelig skulde begynde, nemlig med at sige, at al virkelig god Opførsel kommer indefra, udspringer naturligt fra det Sind, som er åbent for Velvilje, Forståelse og Medynk med Andre.
Vær ikke vigtig.
Vær ikke underdanig.
Vær fordringsfuld overfor Dem selv men ikke overfor Andre.
Det har været mig så magtpåliggende at få nedskrevet disse grundlæggende Råd for vor Omgangstone, at de er faldet mig i Pennen, før jeg tog fat det, hvor jeg rettelig skulde begynde, nemlig med at sige, at al virkelig god Opførsel kommer indefra, udspringer naturligt fra det Sind, som er åbent for Velvilje, Forståelse og Medynk med Andre.
Dette bruger man f.eks. til at få indholdet af to DIV'er til at flugte på en side, selv om de iflg. programmeringen burde sidde forskudt.
Centrering af tekstblok med margin
Ud over at give margin en talværdi, kan man også give den værdien auto. Auto centrerer tekstboksen på siden. Det er f.eks. den der er anvendt til at højre/venstre-centrere tekstpanelet på denne side. Hvis man blot definerer STYLE="margin:auto", centreres både top/bund og højre/venstre. Dette er generelt en skidt idé i forholdt til læsevenligheden af siden, men det er muligt. En mere gængs og brugervenlig opsætning er at centrere i højre/venstre og definere top og bund. På denne side har jeg valgt at holde top og bund fri af skærmkanten, så her kunne det være STYLE="margin:20px auto". Helt til kanten ville blive STYLE="margin:0px auto". Hvis tekstblokkens størrelse er mindre end skærmen, så man ikke kan opnå afstanden 0px i begge ender, er det topmargin der bliver 0px.
Indrykning på tekst
Når man skal lave større tekstsider, kan det give en god effekt med det klassiske indryk på første linje i et afsnit.
Dette er der flere løsninger på. Valget afhænger af koden der anvendes på siden generelt, og hvad man kan lide.
Den hurtige er at anvende kode for mellemrum, dvs. HTML koden for et mellemrum, hvilket kunne være  . Hvis man blot trykker to eller flere gange mellemrum, kan indrykket kun ses i kildekoden, med mindre man har f.eks. STYLE="white-space: pre-wrap;" på tekstens tag. Et indryk på tre space er således    .
Hvis vi prøver at lege lidt med en tekststreng, så bliver kildekoden:
På skærmen bliver det:
Hvis man bruger denne fremgangsmåde, skal man lige være opmærksom på, at ved text-align:justify kan browseren finde på at strække mellemrummene. Her er det sidste afsnit igen, først med text-align:justify og derefter med text-align:left:
Derfor: Ved lige højre- og venstremarginer (text-align:justify) er det en fordel at bruge en anden fremgangsmåde.
Hvis man har sin text i en tag som f.eks. DIV, P eller BLOCKQUOTE, kan man med fordel anvende den style der hedder text-indent. En DIV-tag med text-indent:30px ser med text-align:justify og text-align:left således ud på afsnittet fra før:
Længden af indryk kan, som alle andre længder, defineres i %, in, cm, mm, em, pt, pc og px efter behag. Pixels, px, er i reglen en god enhed at arbejde med, fordi man i skærmstørrelser/opløsninger tænker i pixels, og man kommer ikke i klammeri med skiftende fontstørrelser, hvis man bruger det. Værdien kan også være negativ. Ved f.eks. text-indent:-30px kommer det til at se således ud:
Dette er der flere løsninger på. Valget afhænger af koden der anvendes på siden generelt, og hvad man kan lide.
Den hurtige er at anvende kode for mellemrum, dvs. HTML koden for et mellemrum, hvilket kunne være  . Hvis man blot trykker to eller flere gange mellemrum, kan indrykket kun ses i kildekoden, med mindre man har f.eks. STYLE="white-space: pre-wrap;" på tekstens tag. Et indryk på tre space er således    .
Hvis vi prøver at lege lidt med en tekststreng, så bliver kildekoden:
Vær ikke snobbet.<BR>
 Vær ikke vigtig.<BR>
  Vær ikke underdanig.<BR>
   Vær fordringsfuld overfor Dem selv men ikke overfor Andre.<BR>
    Det har været mig så magtpåliggende at få nedskrevet disse grundlæggende Råd for vor Omgangstone, at de er faldet mig i Pennen, før jeg tog fat det, hvor jeg rettelig skulde begynde, nemlig med at sige, at al virkelig god Opførsel kommer indefra, udspringer naturligt fra det Sind, som er åbent for Velvilje, Forståelse og Medynk med Andre.
 Vær ikke vigtig.<BR>
  Vær ikke underdanig.<BR>
   Vær fordringsfuld overfor Dem selv men ikke overfor Andre.<BR>
    Det har været mig så magtpåliggende at få nedskrevet disse grundlæggende Råd for vor Omgangstone, at de er faldet mig i Pennen, før jeg tog fat det, hvor jeg rettelig skulde begynde, nemlig med at sige, at al virkelig god Opførsel kommer indefra, udspringer naturligt fra det Sind, som er åbent for Velvilje, Forståelse og Medynk med Andre.
På skærmen bliver det:
Vær ikke snobbet.
Vær ikke vigtig.
Vær ikke underdanig.
Vær fordringsfuld overfor Dem selv men ikke overfor Andre.
Det har været mig så magtpåliggende at få nedskrevet disse grundlæggende Råd for vor Omgangstone, at de er faldet mig i Pennen, før jeg tog fat det, hvor jeg rettelig skulde begynde, nemlig med at sige, at al virkelig god Opførsel kommer indefra, udspringer naturligt fra det Sind, som er åbent for Velvilje, Forståelse og Medynk med Andre.
Vær ikke vigtig.
Vær ikke underdanig.
Vær fordringsfuld overfor Dem selv men ikke overfor Andre.
Det har været mig så magtpåliggende at få nedskrevet disse grundlæggende Råd for vor Omgangstone, at de er faldet mig i Pennen, før jeg tog fat det, hvor jeg rettelig skulde begynde, nemlig med at sige, at al virkelig god Opførsel kommer indefra, udspringer naturligt fra det Sind, som er åbent for Velvilje, Forståelse og Medynk med Andre.
Hvis man bruger denne fremgangsmåde, skal man lige være opmærksom på, at ved text-align:justify kan browseren finde på at strække mellemrummene. Her er det sidste afsnit igen, først med text-align:justify og derefter med text-align:left:
Det har været mig så magtpåliggende at få nedskrevet disse grundlæggende Råd for vor Omgangstone, at de er faldet mig i Pennen, før jeg tog fat det, hvor jeg rettelig skulde begynde, nemlig med at sige, at al virkelig god Opførsel kommer indefra, udspringer naturligt fra det Sind, som er åbent for Velvilje, Forståelse og Medynk med Andre.
Det har været mig så magtpåliggende at få nedskrevet disse grundlæggende Råd for vor Omgangstone, at de er faldet mig i Pennen, før jeg tog fat det, hvor jeg rettelig skulde begynde, nemlig med at sige, at al virkelig god Opførsel kommer indefra, udspringer naturligt fra det Sind, som er åbent for Velvilje, Forståelse og Medynk med Andre.
Derfor: Ved lige højre- og venstremarginer (text-align:justify) er det en fordel at bruge en anden fremgangsmåde.
Hvis man har sin text i en tag som f.eks. DIV, P eller BLOCKQUOTE, kan man med fordel anvende den style der hedder text-indent. En DIV-tag med text-indent:30px ser med text-align:justify og text-align:left således ud på afsnittet fra før:
Det har været mig så magtpåliggende at få nedskrevet disse grundlæggende Råd for vor Omgangstone, at de er faldet mig i Pennen, før jeg tog fat det, hvor jeg rettelig skulde begynde, nemlig med at sige, at al virkelig god Opførsel kommer indefra, udspringer naturligt fra det Sind, som er åbent for Velvilje, Forståelse og Medynk med Andre.
Det har været mig så magtpåliggende at få nedskrevet disse grundlæggende Råd for vor Omgangstone, at de er faldet mig i Pennen, før jeg tog fat det, hvor jeg rettelig skulde begynde, nemlig med at sige, at al virkelig god Opførsel kommer indefra, udspringer naturligt fra det Sind, som er åbent for Velvilje, Forståelse og Medynk med Andre.
Længden af indryk kan, som alle andre længder, defineres i %, in, cm, mm, em, pt, pc og px efter behag. Pixels, px, er i reglen en god enhed at arbejde med, fordi man i skærmstørrelser/opløsninger tænker i pixels, og man kommer ikke i klammeri med skiftende fontstørrelser, hvis man bruger det. Værdien kan også være negativ. Ved f.eks. text-indent:-30px kommer det til at se således ud:
Det har været mig så magtpåliggende at få nedskrevet disse grundlæggende Råd for vor Omgangstone, at de er faldet mig i Pennen, før jeg tog fat det, hvor jeg rettelig skulde begynde, nemlig med at sige, at al virkelig god Opførsel kommer indefra, udspringer naturligt fra det Sind, som er åbent for Velvilje, Forståelse og Medynk med Andre.