Ovenfor en liste over meget brugte block-elementer
HTML5-elementerne skiller sig i skrivende stund ud ved ikke at være 'ægte' block-elementer - se artiklen "Introduktion til HTML5". De skal derfor styles med display: block; hvilket gøres lettest ved hjælp af et 'reset CSS', hvilket der kan læses mere om i "Beskrivelse af et reset CSS"
Inline elementer eksempler
img
a
span
strong
bold
br
input
label
button
textarea
Ovenfor en liste over meget brugte inline-elementer
input, label, button og textarea bruges oftest alle i en form
button afviger på flere områder - se specifikationer for width, height, margin og padding i afsnittet "inline elementernes indfødte værdier" længere nede på siden
HTML-elementerne inline og block
Når en side i et website skal opsættes i HTML, bruges elementer som hver især har sin egen individuelle funktion. Udover at hvert element har en funktion som browsere og søgemaskiner bruger til at kategorisere indholdet ud fra, er der også forskelle i elementernes opførsel i forhold til sidens layout.
Overordnet kan elementerne inddeles i 2 forskellige typer: block- og inline-elementer. Generelt kan man sige, at block-elementernes primære funktion er at give siden struktur i forhold til layout, mens inline-elementer oftest relaterer sig til tekst og billeder.
HTML og sidens layout
Lidt firkantet kan man sige, at det øverste venstre hjørne på en hjemmeside altid er udgangspunktet for alt layout – hvis ikke elementerne er blevet tilført anden styling end den har fra "fødslen" (default styling), vil alle elementer på en hjemmeside per automatik søge mod øverste venstre hjørne uanset om det er block- eller inline-elementer.
Hvilket element ”der kommer først op i hjørnet”, afhænger først og fremmest af placeringen i <body> - det element der ligger øverst i koden, vil også være det der lægger sig tættest på øverste venstre hjørne.
Se eksemplet her, hvor 'DIV 1' placeret øverst i koden ligger tættest øverste venstre hjørne i layoutet:
<body>
<div> DIV 1 </div>
<div> DIV 2 </div>
</body>
Forskel på bredden
Den vigtigste forskel mellem block- og inline-elementer er bredden. Mens et block-element per automatik vil forsøge at fylde mest muligt i bredden - altså 100%, defineres bredden at et inline-element af hvad det indeholder.
Block-elementet strækker sig fra venstre til højre side af den omgivende container - for eksempel body - og vil uanset bredde altid tvinge det efterfølgende element til at placere sig under sig.
Omvendt giver inline-elementet plads til at andre elementer horizontalt kan placere sig på samme "linie" - forudsat at indholdet i det første inline-elementet ikke er bredere end den omgivende container - for eksempel body.
Her et eksempel hvor inline-elementet span er placeret øverst i koden, og en div er indsat nedenunder:
<body>
<span> SPAN - INLINE ELEMENT </span>
<div> DIV - BLOCK ELEMENT </div>
</body>
Elementet span ikke er bredere end indholdet, mens div'en udfylder hele den omgivende gule container i bredden
Block elementer fremtvinger linieskift
Selv når block-elementet får tildelt en bredde som giver plads til at andre elementer kan placere sig vertikalt på samme linie, vil block-elementet fremtvinge et linieskift. Se eksemplet her, hvor 2 block-elementer placerer sig nedenunder hinanden, selvom der er masser af plads i den omgivende container:
div {
width: 300px;
}
Et block element fremtvinger altid et linie-skift uanset bredde
Styling af elementer med CSS
Udover at block- og inline-elementer opfører sig forskelligt i bredden, adskiller de sig også fra hinanden på en række øvrige områder. Alle elementer kan dog ved hjælp af CSS meget hurtigt ændres til at opføre sig nøjagtigt som man ønsker ved at tilføje styling til elementernes 'default værdier' - altså de værdier som de er "født" med.
Styling ved hjælp af 'display'
Den mest gennemgribende form for styling er ændringen fra for eksempel 'block' til 'inline' eller omvendt. Har jeg et inline element som jeg af layoutmæssige årsager ønsker optager 100% af bredden i omgivende container (ligesom et block-element), kan jeg ved hjælp af CSS meget hurtigt ændre inline-elementet til et block-element. Det samme gælder den anden vej ved hjælp af 'display: inline' Men selvom elementet opfører sig anderledes når det tildeles nye egenskaber ved hjælp af 'display', vil det af browsere og ikke mindst i forhold til validering stadig opfattes som det oprindelige element - altså uden 'display.
span {
display: block;
}
Span med display: block udfylder containeren 100% i bredden ligesom et block-element
Kombination af et block- og et inline-element
Desuden kan jeg på vælge at at style både block- og inline-elementer med en blanding af værdierne kaldet display: inline-block. Det vil tildele elementet egenskaber fra både block- og inline-elementer. læs mere om display: inline-block længere ned på siden:
div {
display: inline-block;
}
Replaced elements
I gruppen af 'inline-elementer' findes en samling elementer som har en predefineret styling – disse kaldes 'replaced elements', og har en forudbestemt styling som automatisk følger elementet, når det indsættes i body på siden. Stylingen kan være defineret i browserens interne stylesheet eller stylingen kan være genereret ud fra elementets indhold:
Replaced elements med browserdefineret styling:
input
button
textarea
br
hr
Eksempel - button
Et godt eksempel på et 'replaced element' med en browserbestemt styling er 'button' - stylingen for 'button' er gennemgribende og indeholder angivelser for både baggrundsfarve og ramme uanset hvilken browser der fremviser elementet:
Replaced elements med styling bestemt af indholdet:
img
object
audio
video
Eksempel - img
Her er det gode eksempel 'img' - altså et billede. Bruger jeg en HTML-editor til at indsætte et billede, følger der ofte angivelser for højde og med i koden:
HTML
<img src="images/meeting.jpg" width="700" height="215" /> <-- UNITLESS VALUES FOR BREDDE OG HØJDE -->
Angivelserne af højde og bredde refererer til billedets faktiske størrelse målt i pixels - men som en 'unitless value' - angivelserne følges ikke af endelsen 'px', og kaldes derfor unitless. SElv hvis jeg sletter angivelserne vil billedet når indsat på hjemmesiden stadig vises med den originale højde og bredde indtil andet angives ved hjælp af CSS.
Det altid en god ide at bruge et 'reset CSS' til at nulstille alle vigtige værdier for HTML-elementerne - dette gælder både 'replaced elements' og inline- og block-elementer.
Grunden er, at browsere ofte fortolker elementernes default-værdier på forskellige måder - for eksempel kan der imellem Internet Explorer og Mozilla Firefox være forskellige opfattelser af, hvor mange pixels margin elementet 'p' har per default.
Der er klare regler for hvordan elementerne bør bruges - regelsættet er oprindeligt opstillet af organisationen W3C, og især i forbindelse med udviklingen af HTML5, er også organisationen WHATWG begyndt at blande sig i, hvordan reglerne for brugen af HTML5-elementerne skal udformes.
Det er vigtigt, at man lægger sig så tæt op af de udstukne regler som muligt - det giver størst sikkerhed for, at websiden ser ens ud i alle browsere, og at søgemaskinerne kan kategorisere websitet indhold hurtigt og korrekt.
Udover selvfølgelig at være bekendt med de gældende regler for brug af elementerne, kan en online "validator" bruges - den undersøger hjemmesiden og rapporterer eventuelle fundne fejl. Her er et link til W3C validator, og et link til html5.validator.nu
block-elementernes indfødte værdier
width
optager per default mest mulig plads i bredden – ligesom 'width: 100%'
uanset bredde vil et block-element altid fremtvinge et linie-skift for det efterfølgende element (dog ikke hvis 'float' er defineret
height
højden defineres af elementets indhold medmindre højden er angivet i CSS
float
'float' eliminerer det tvungne linieskift for det efterfølgende element og gør det muligt at sidestille andre elementer horizontalt
bruges 'float' defineres bredden af elementets indhold medmindre bredden er angivet i CSS - ligesom et 'inline'-element
margin + padding
margin + padding kan bruges i både top og bund og begge sider
Bemærk:
'p' og 'h1' - 'h6': der indsættes automatisk 'margin' i top og bund af en blok af text - afstand mellem linierne justeres ved hjælp af 'line-height'
position
'relative', 'absolute' og 'fixed' giver mulighed for ny placering ved hjælp af 'top', 'left', 'bottom' og 'right'
top + left
kan ikke bruges – skal jeg bruge 'top' eller 'left', er det nødvendigt at angive en 'position' ('float' virker ikke)
inline-elementernes indfødte værdier
width
et inline-element er ikke bredere end indholdet - kan sidestilles horzontalt uden tvungent linie-skift fro det følgende element
'width' og 'max-width' kan ikke defineres - optager kun den plads som er nødvendig for at vise indholdet af elementet
for at bruge 'width' er enten 'float' eller 'postion: absolute' eller 'fixed' nødvendig - 'relative' virker ikke
er indeholder tekst, vil elementet lave et 'line-break' (linie-skift) når den omgivende container bliver for smal
- brug eventuelt 'white-space: nowrap' for at undgå dette
Benærk:
button: både 'width' og 'height' kan bruges
textarea: maksimal bredde svarer til 20 tastaturanslag - det kan dog lade sig gøre ved hjælp af CSS3's box-sizing som understøttes af + IE8
height
height kan ikke defineres - optager kun den plads som er nødvendig for at vise indholdet af elementet
height kan defineres ved at bruge enten 'float' eller 'position: absolute' eller 'fixed' -
'relative' har ingen effekt
Benærk:
button: 'height' virker
margin
'margin' kan kun bruges i siderne – ikke i top og bund
Benærk:
button: 'margin' kan bruges i top og bund
padding
'padding' kan bruges i sider + i top og bund
Benærk:
button: der tilføjes automatisk 'padding' - brug eventuelt et reset CSS til nulstilling
z-index
inline-elementer har højere 'z-index' end block-elementer og vil placere sig øverst
float
bruges 'float' vil et inline-element blive til et block-element - dog uden tvungent linie-skift
z-index' bliver 0 - stacking elimineres
som block-element kan 'width', 'height', 'margin' og 'padding' defineres
inline-block elementernes indfødte værdier
width, height, margin og padding
'width', 'height', 'margin' og 'padding' kan tilføjes uden brug af 'float'
et inline-block element er ikke bredere end indholdet hvis ikke andet er angivet i CSS - kan sidestilles horzontalt uden tvungent linie-skift fro det følgende element
ekstra horizontal margin
der indsættes automatisk cirka 4px 'margin' i højre og venstre side uanset hvilken type element der grænser op til -
der indsættes ikke margin op til den omgivende container. Bredden af margin er browserafhængig ligesom 'font-size' og zoom på mobile enheder kan have betydning.
Se afstanden på hver side af de blå 'inline-block' elementer
Bemærk:
margin: jeg kan fjerne 'margin' i venstre og højre side ved at indsætte en negativ margin - dette vil dog samtidig trække elementet ind over den omgivende container!
div {
display: inline-block;
margin-left: -4px
margin-right: -4px
}
Se flere løsninger som eliminerer automatisk margin på inline-block elementer
whitespace for tekst
ingen automatisk 'line-break' for tekst i elementet
