Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Leer Begrip van Block-, Inline- en Inline-Block-Elementen | Het CSS-Boxmodel en het Uitlijnen van Elementen
CSS-Grondbeginselen

bookBegrip van Block-, Inline- en Inline-Block-Elementen

HTML-elementen gedragen zich verschillend, afhankelijk van of ze block, inline of inline-block zijn. Deze weergavetypen beïnvloeden de lay-out, de afstand en welke CSS-eigenschappen je kunt gebruiken.

Block-elementen

  • Beginnen op een nieuwe regel;
  • Gebruiken de volledige breedte van hun container;
  • Ondersteunen breedte, hoogte, marge, opvulling en rand.

Veelvoorkomende voorbeelden: <div>, <p>, <ul>, <li>, <h1>–<h6>.

index.html

index.html

index.css

index.css

copy

Inline-elementen

  • Blijven op dezelfde regel;
  • Nemen alleen de ruimte in die nodig is voor hun inhoud;
  • Kunnen geen breedte of hoogte krijgen (maar border werkt wel).

Veelvoorkomende voorbeelden: <a>, <span>, <img>, <input>.

index.html

index.html

index.css

index.css

copy

Inline-block-elementen

  • Blijven inline, zoals tekst;
  • Ondersteunen breedte, hoogte, marge, opvulling en rand, zoals block-elementen.

Voorbeelden: <button>, <select>, <textarea>.

Handig wanneer elementen naast elkaar moeten staan, maar volledige stylingcontrole vereist is.

index.html

index.html

index.css

index.css

copy

1. Wat is het belangrijkste verschil tussen blok- en inline-elementen?

2. Welke van de volgende is een voorbeeld van een blokelement?

question mark

Wat is het belangrijkste verschil tussen blok- en inline-elementen?

Select the correct answer

question mark

Welke van de volgende is een voorbeeld van een blokelement?

Select the correct answer

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 3. Hoofdstuk 7

Vraag AI

expand

Vraag AI

ChatGPT

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

Suggested prompts:

Can you explain the main differences between block, inline, and inline-block elements?

Which HTML elements are typically block, inline, or inline-block?

Can you give examples of when to use each display type in a web page?

bookBegrip van Block-, Inline- en Inline-Block-Elementen

Veeg om het menu te tonen

HTML-elementen gedragen zich verschillend, afhankelijk van of ze block, inline of inline-block zijn. Deze weergavetypen beïnvloeden de lay-out, de afstand en welke CSS-eigenschappen je kunt gebruiken.

Block-elementen

  • Beginnen op een nieuwe regel;
  • Gebruiken de volledige breedte van hun container;
  • Ondersteunen breedte, hoogte, marge, opvulling en rand.

Veelvoorkomende voorbeelden: <div>, <p>, <ul>, <li>, <h1>–<h6>.

index.html

index.html

index.css

index.css

copy

Inline-elementen

  • Blijven op dezelfde regel;
  • Nemen alleen de ruimte in die nodig is voor hun inhoud;
  • Kunnen geen breedte of hoogte krijgen (maar border werkt wel).

Veelvoorkomende voorbeelden: <a>, <span>, <img>, <input>.

index.html

index.html

index.css

index.css

copy

Inline-block-elementen

  • Blijven inline, zoals tekst;
  • Ondersteunen breedte, hoogte, marge, opvulling en rand, zoals block-elementen.

Voorbeelden: <button>, <select>, <textarea>.

Handig wanneer elementen naast elkaar moeten staan, maar volledige stylingcontrole vereist is.

index.html

index.html

index.css

index.css

copy

1. Wat is het belangrijkste verschil tussen blok- en inline-elementen?

2. Welke van de volgende is een voorbeeld van een blokelement?

question mark

Wat is het belangrijkste verschil tussen blok- en inline-elementen?

Select the correct answer

question mark

Welke van de volgende is een voorbeeld van een blokelement?

Select the correct answer

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 3. Hoofdstuk 7
some-alt