Open in Notepad++ het bestand template.html Voeg aan de body van het HTML-document de code uit de onderstaande tekst toe.
<section>
<article>
<h2 class= "rand">
Dit is een koptekst
</h2>
<p class= "rand">
Dit is een alinea
</p>
</article>
<article>
<h2 class= "rand">
Dit is een koptekst
</h2>
<p class= "rand">
Dit is een alinea
</p>
</article>
</section>
Sla het bestand op in de map html onder de naam boxmodel.html
Open in Notepad++ het bestand opmaak.css
Voeg de code uit de onderstaande tekst toe voor de opmaak van het element p met het attribuut class= "rand" en voor de opmaak van het element h2 met het attribuut class= "rand" .
Sla daarna het bestand op onder dezelfde naam
Open het bestand boxmodel.html in een browser.
Wat is de functie van de regel border-radius: 7px;?
Open in Chrome het bestand boxmodel.html
Activeer de ontwikkelomgeving en verander de waarden van de margin van het eerste element p in de code van margin: 15px 15px 15px 15px; in margin: 4px 6px 8px 10px;.
Bekijk wat er verandert in het boxmodel van de ontwikkelomgeving.
De veranderingen die je aanbrengt in de ontwikkelomgeving worden niet opgeslagen.
Na het sluiten van de browser heeft het element p met het attribuut class= "rand" voor de margin nog steeds de waarden margin:15px 15px 15px 15px;.
Voor meer uitleg bekijk de afbeelding hieronder.
Open in Notepad++ het bestand opmaak.css Verander voor het element p met het attribuut class= "rand" de waarde van de padding van padding:15px 15px 15px 15px; in padding: 15px;. Sla het bestand op onder dezelfde naam.
Open nu in Chrome het bestand boxmodel.html en bekijk de instellingen van het element p in de ontwikkelomgeving. Verander in het CSS-gedeelte de regel padding: 15px 15px 15px 15px; in padding: 15px;.
Welke conclusie kun je nu trekken?