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 3^de 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;
}