Terug

CSS 3 – Div, Margin, Padding en Border


Om een vlakverdeling van je pagina te kunnen maken heb je een html element nodig voor elk vlak. Wij gaan hier het <div> element voor gebruiken. Elke rechthoek op een site bestaat vaak uit één of meerdere divs. Bekijk eens de bron van een willekeurige website: een beetje ingewikkelde pagina bestaat al gauw uit honderden divs. In de visualisatie hierboven (bron) is elk vlak met een lichtblauw randje een <div> element.

  1. Voeg aan de HTML van een pagina die je eerder hebt gemaakt drie <div> elementen toe. Dit doe je door letterlijk <div> en </div> om bestaande paragrafen, afbeeldingen of andere inhoud op je pagina te zetten.

    Bijvoorbeeld:

    <div>
        <p>
            Dit is een bestaande paragraaf op je website
        </p>
    </div>
    

    of

    <div>
        <img src="kitten.jpg">
    </div>
    

    of

    <div>
        <h1>Mijn Kat</h1>
        <p>
            Deze website gaat over mijn kat. Ze heet Snuggles.
        </p>
        <img src="kitten.jpg">
    </div>
    

    Let op dat alle html-elementen die begonnen worden na de <div> tag, worden afgesloten vóór de </div> tag. Ze moeten dus volledig binnen het div element zitten

  2. Geef elk div element dezelfde class en een verschillend id.

    <div class="mijnDivs" id="mijnDiv1">
        ...
    </div>
    
  3. Geef in CSS middels hun class elke div dezelfde achtergrondkleur.

  4. Geef in CSS middels hun id één div een background-image.
    Experimenteer met de background-size. Bekijk wat het verschil is tussen background-size: cover; en background-size: contain;

  5. Maak één div onzichtbaar door het de volgende CSS eigenschap te geven:

    display: none;
    

    Een div onzichtbaar maken lijkt nu nog wat onzinnig, maar op het moment dat we onze site Responsive gaan maken, komen we dit regelmatig tegen.
    Als dat gelukt is haal je display: none; weer weg. Die gaan we later pas weer gebruiken.

Margin, padding en border

Dit hoofdstukje gaat over drie CSS-eigenschappen die gaan over de ruimte om je elementen heen:
• de margin die de ruimte tussen het element (bijvoorbeeld een div) en andere elementen bepaalt.
• de padding die de ruimte tussen de rand van het element en de inhoud bepaalt.
• de border waarmee je de rand van het element een dikte, kleur en lijnstijl kunt geven.

  1. Open deze webpagina. Hier lees je hoe je een rand om een element maakt. Geef één van de divs die je hierboven een id hebt gegeven een oranje rand van 3px breed.

  2. Zoek op internet wat de margin en padding properties doen, en experimenteer met deze eigenschappen in combinatie met een div. Ga pas verder als je goed begrijpt wat het verschil is tussen margin en padding.