Wat betreft van de vormgeving van een element wordt er bij Cascading Style Sheets van uitgegaan dat elk element wordt vormgegeven door een rechthoekige gebied, de box. Van binnen naar buiten bestaat de box uit de inhoud van het element, de padding, de border en de margin. Visueel ziet het er als volgt uit:
De margin is de afstand van de rand van een element tot de rand van het parent element of de rand van
een aangrenzend element. De margin is transparent en neemt dus de achtergrondkleur aan van het
parent element.
De border is de rand van een element.
De padding is de afstand tussen de rand van een element en de inhoud. Indien een achtergrondkleur
gebruikt wordt voor het element, dan heeft de padding dezelfde kleur.
De grootte van de box wordt bepaald door de som van de afmetingen van het element en de breedte van
de margin, de border en de padding.
Bijvoorbeeld: de totale breedte van de div hieronder is 300px (250 + 2x10 + 2x5 + 2x10):
div {
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
}
Als je de margin aan de linkerkant anders wilt instellen dan aan de rechterkant dan kan je gebruik maken
van ‘margin-left’ en ‘margin-right’. Op een soortgelijke manier kan je de bovenen onderkant apart
instellen. Dit kan ook met de padding en border van een box.
Let op: verschillende browsers kunnen verschillend reageren op de instellingen!
Shorthand property
Een verkorte schrijfwijze bij afwijkende margins of paddings noem je de ‘shorthand-property.
Bijvoorbeeld:
margin:25px 50px 75px 100px;
Begin bovenaan, en met de klok mee. Dus margin-top: 25px, margin-right: 50px, margin-bottom:
75 px, margin-left: 100px.
De breedte van de margin, de border en de padding worden vastgelegd met de eigenschappen voor de
margin, de rand en de padding. De afmetingen van de inhoud van het element kunnen worden vastgelegd
met de eigenschappen width en height. Bij elementen op blokniveau is sprake van één rechthoekige box.
Elementen op blokniveau zijn elementen die vooraf gegaan en gevolgd worden door de overgang naar
een nieuwe regel. Voorbeelden zijn P, PRE, BLOCKQUOTE, ADDRESS, DIV, CENTER, Hx, BR, HR, UL,
OL, LI, DL, DT, DD, TABLE en FORM.
Inline elementen zijn elementen die dezelfde regel kunnen delen met andere elementen en
niet vooraf gegaan en gevolgd worden door de overgang naar een nieuwe regel. Voorbeelden
zijn A, IMG, FONT, B, I, U, TT en SPAN.