- Alles is een blok
- 14.1 Marges
- 14.2 Padding
- 14.3 Gewone rand
- 14.4 Afgeronde rand
- 14.5 Randschaduw
- 14.6 Box-sizing
Een webpagina is opgebouwd uit blokken: blokken met koppen, tekst, afbeeldingen, opsommingen en Tabellen. hoe al die blokken op een pagina zich tot elkaar verhouden is beschreven in het Boxmodel, één van de kernpunten van CSS.
Blokken hebben eigenschappen die ingesteld kunnen worden: marges, randen en padding . opsommingen en tabellen zijn speciale soorten blokken.
Elk element (blok) in een HTML-document neemt een rechthoekige hoeveelheid ruimte in. De totale ruimte van het blok wordt bepaald door:
- De inhoud = content van het element;
- De ruimte rondom de inhoud padding;
- Een rand = border;
- De ruimte rondom de rand margin.

De marge is de ruimte aan de buitenkant van een element. Een marge is altijd transparant, je kunt er geen kleur of achtergrond aan toevoegen. Aangezien een rechthoek vier zijden heeft, zijn er vier eigenschappen plus een verzameleigenschap.
- margin-top
- margin-right
- margin-bottom
- margin-left
- margin (voor de 4 zijden)
Marges kunnen de volgende waarden hebben:
- lengte
- percentage
- auto
De waarde auto betekent dat de beschikbare ruimte automatisch ingevuld wordt. Daardoor is auto erg handig voorhet centreren van blokken.doorvan bijvoorbeeldeen <div> de marge links en rechts op auto te zetten, wordt het blok gecentreerd in het venster. Houdt er wel rekening mee dathet blok een opgegeven breedte moet hebben, anders werkt het niet.
div {
width: 960px;
margin-left: auto;
margin-right: auto;
}
Je kunt ook minder dan vier waarden opgeven en dan werkt het als volgt:
margin: 5px // alle marges zijn5 pixels breedt.
margin: 5px 3px // boven en onder 5 pixels, rechts en links 3 pixels.
margin: 5px 3px 7px 2px // boven 5 pixels, rechts 3 pixels , onder 7 pixels en links 2
pixels
Een marge kan ook een negatieve waarde hebben, niet elke browser kan goed overweg met een negatieve marge.
Ik stel de marge van de browser in op 0 pixels. Dit zorgt ervoor dat de webpagina mooi tegen de buitenkanten van de browser plakt. Doe dit altijd wanneer je een website ontwerpt!
body {
margin: 0;
}
Padding is de ruimte tussen de inhoud en de rand. Als er geen rand is ingesteld, is het vanzelfsprekend de ruimte tot aan de marge. Ook voor padding zijn er vier eigenschappen plus een verzameleigenschap:
- padding-top
- padding-right
- padding-bottom
- padding-left
- padding
Padding kan een van de volgende waarden krijgen:
- lengte
- percentage
Negatieve waarden zijn niet mogelijk. Met de verzameleigenschap padding geeft u waarden op dezelfde manier aan als bij margin.
div {
width: 300px;
margin: 25px;
padding: 25px;
}

Voor randen (borders) zijn meer eigenschappen beschikbaar dan alleen de dikte. Je kunt het volgende instellen:
- de randdikte
- de kleur
- de stijl

1. Randdikte
De dikte van de rand kan met de volgende waarden worden aangegeven:
- dikte in pixels
- thin
- medium = standaard
- thick
Elke rand kan afzonderlijk worden ingesteld met:
- border-top-width
- border-right-width
- border-bottom-width
- border-left-width
- border-width
Net als bij margin en padding kunnen met border-width alle randen in een keer worden ingesteld.
2. Randkleur
Voor de kleur van de rand zijn de volgende eigenschappen beschikbaar:
- border-top-color
- border-right-color
- border-bottom-color
- border-left-color
- border-color
Mogelijke waarden voor de kleur zijn:
- een kleur
- transparant
De waarde transparant geeft een doorzichtige (onzichtbare) rand die wel een breedte heeft.
3.Randstijl
De randstijl wordt ingesteld met de volgende eigenschappen:
- border-top-style
- border-right-style
- border-bottom-style
- border-left-style
- border-style
Voor de stijl van de rand zijn in theorie zijn veel mogelijkheden beschikbaar:
- none
- dotted = puntjes
- dashed = streepjes
- solid = ononderbroken
- double = dubbelerand
- groove = gekervd
- ridge = opstaand
- inset = ingelegd
- outset = opgelegd
- hidden = zoals none

In CSS3 is het eenvoudig om ronde randen te maken. De ronde hoeken worden ingesteld met de volgende eigenschap: border-radius
#example1 {
border: 2px solid red;
padding: 10px;
border-radius: 25px;
}
#example2 {
border: 2px solid red;
padding: 10px;
border-radius: 50px 20px;
}


De box-schaduw eigenschap geeft een schaduw aan het blok-elementen.
#example1 {
border: 1px solid;
padding: 10px;
box-shadow: 5px 10px;
}
#example2 {
border: 1px solid;
padding: 10px;
box-shadow: 5px 10px #888888;
}
#example3 {
border: 1px solid;
padding: 10px;
box-shadow: 5px 10px red;
}

Je kan ook een 3de waarde meegeven om de schaduw te verzachten of te verdoezelen.
#example3 {
border: 1px solid;
padding: 10px;
box-shadow: 5px 10px 18px red;
}

De CSS box-sizing eigenschap laat ons toe om de opvulling en de grens van de totale breedte en hoogte van een element op te nemen.
Standaard
Standaard wordt de breedte en hoogte van een element berekend:
- breedte+ padding + border = daadwerkelijke breedte van een element
- hoogte + padding + border = actuele hoogte van een element
De volgende afbeelding toont twee <div> elementen met dezelfde gespecificeerde breedte en hoogte:

.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
Oplossing:
Als u ingesteld box-sizing: border-box; op een element padding en de grens zijn opgenomen in de breedte en hoogte:
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}

Toegepast op alle elementen is veilig en verstandig:
* {
box-sizing: border-box;
}