Websites met stijl

17. Blok en inline; margin, padding, border

In dit hoofdstuk:

In dit hoofdstuk en het volgende laten we de opmaak van de website even liggen:
we bekijken in dit hoofdstuk de verschillende soorten elementen en de margin, padding en border.
In het volgende hoofdstuk bekijken we de positionering van elementen.

In hoofdstuk 19 gaan we aan de slag met de opmaak van het menu en de header van onze website

Blok-, inline- en inline-blok elementen

Er zijn blok-elementen, inline-elementen en inline-blok elementen. Ze verschillen onder meer in de ruimte die ze innemen.

Blok-elementen

Voorbeeld 1a: Dit is een blok element.

Voorbeeld 1b: Blok element met een width van 50%. Er kan geen ander element voor of achter een blok-element komen te staan, ook al is er nog plaats. De hoogte past zich aan aan de hoeveelheid tekst.

Voorbeelden van blok-elementen

Voorbeelden van blok-elementen zijn: article, body, div, footer, h1..h6, header, nav.
In de naslag html staat bij elk element aangegeven of het een blok-element is of een inline-element.

Inline-elementen

Inline-elementen: Voorbeeld 2a: inline-element Voorbeeld 2b: Nog een inline-element Voorbeeld 2c: Een lang inline-element dat over verschillende regels doorloopt. Een inline-element kan dus 0,25 regels lang zijn, maar evengoed 1,5 regels of 2,8 regels.

Voorbeelden van inline-elementen

Span, a, img zijn voorbeelden van inline-elementen.
In de naslag html staat bij elk element aangegeven of het een blok-element is of een inline-element.

Inline-blok elementen

Een nieuw sooort element is het inline-blok element. Het is een tussenvorm tussen een inline-element en een blok-element:

Inline-blok elementen: Voorbeeld 3a: Een inline-blok element met een breedte van 240px. De hoogte is niet ingesteld. Voorbeeld 3b: Een inline-blok element met een breedte van 240px en een hoogte van 120px.

Voorbeelden van inline-blok elementen

Img is een inline-blok element. Verder weet ik er geen. De meeste inline-blok elementen zijn inline-elementen of blok-elementen die met de eigenschap display: inline-block zijn getransformeerd tot inline-blok elementen.

Border, margin, padding

De inhoud van een element wordt omgeven door een aantal schillen: figuur 1

Meer informatie vind je in naslag: het box-model.

De margin instellen

De grootte van de marge geef je op met 4 waarden, achtereenvolgens boven, rechts, onder, links (vanaf '12 uur' met de klok mee). De waarden worden gescheiden door spaties. voorbeeld margin: 10px 0 20px 0; In het voorbeeld is de marge boven 10px, rechts 0, onder 20px en links ook 0.

Opmerkingen:

Meer informatie in de naslag: marge

De padding instellen

Dit gaat net als bij de margin. voorbeelden padding: 5px 10px 5px 0;
padding: 5px 10px;
padding: 0;
In het bovenste voorbeeld is de padding boven 5px, rechts 10px, onder 5px en links 0.
In het middelste voorbeeld is de paddiing boven en onder 5px; links en rechts 10px.
in het onderste voorbeeld is de padding aan alle kanten 0.

Meer informatie in de naslag: padding

Het instellen van de border komt later aan de orde.

Samenvatting

Bolk, inline, inline blok

Het box model