Beskrivelse af HTML-elementerne block og inline

Block elementer eksempler
  • html
  • body
  • p og h1 - h6
  • ol + ul og li
  • table
  • pre
  • noscript
  • HTML5-elementer
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>
2 elementer i 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>
forskel på div og span i forhold til bredde

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;
}
forskel på div og span i forhold til bredde

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;
}
Brug af display: block; på et inline element

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.

Læs meget mere om brug af billeder på hjemmesiden i artiklerne "Skalering af billeder i responsive layout" og "Skalering background-size cover og contain".

Brug altid et reset 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.

Læs mere om emnet i artriklerne "Beskrivelse af et reset CSS" og forskellig line-height i browsere.

Brug af elementerne og validation

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
Bredden af et block element er 100%
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
block element med float
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
inline-element laver line-break (lini-skigt)
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
z-index for inline elementer
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
HTML5-graphic-setup

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
HTML5-graphic-setup
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.
inline-block element default margin

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
HTML5-graphic-setup