Deel 5: The CSS box model

Web Design

Block elementen

The CSS box model

Block elementen

Komt het meest voor
Nagenoeg alle elementen gedragen zich als block boxes.
bouwblokken die verticaal onder elkaar getoond worden

Block elementen

<p style="background: green">eerste</p>
<p style="background: red">tweede</p>
<p style="background: green">derde</p>

eerste

tweede

derde

Block elementen

Wil je dit box model aanpassen voor een bepaald element?

/* Dit is standaard voor een p-element */
p {
  display: block;
}

/* En hier passen we dit aan. */
.speciale-paragrafen {
  display: inline;
}

eerste tweede derde

Inline elementen

The CSS box model

Inline elementen

Wordt standaard enkel gebruikt voor elementen die zich in de volgorde van tekst moeten gedragen:
- <a>, <span>, <em>, <strong> en <img>

Inline elementen

<p style="background: green">
  eerste 
  <a href="..." style="background:red">tweede</a> 
  derde
</p>

eerste tweede derde

Inline elementen

Wil je dit box model aanpassen voor een bepaald element?

/* Dit is default voor een link element */
a {
  display: inline;
}

/* En hier passen we het aan */
.speciale-link {
  display: block;
}

eerste

tweede

derde

The content box sizing

The CSS box model

The content box sizing

The default box sizing (ref)

All properties will have an effect on block elements (display: block)
Not all properties will have an effect on inline elements (display: inline)

The content box sizing

.first {
  width: 6rem;
  height: 3rem;
  background: red;
}

<div class="first"></div>
<div class="second"></div>

.second {
  width: 3rem;
  height: 3rem;
  background: red;
}

Here is some content

The content box sizing

.first {
  width: 6rem;
  height: 3rem;
  background: red;
}

<div class="first"></div>
<div class="second"></div>

.second {
  width: 6rem;
  height: 3rem;
  background: red;
  padding: 1rem;
}

Here is some content

The content box sizing

.first {
  width: 6rem;
  height: 3rem;
  background: red;
}

<div class="first">Here is some content</div>
<div class="second">Here is some content</div>

.second {
  width: 6rem;
  height: 3rem;
  background: red;
  padding: 1rem;
  border: 2px solid blue;
}

Here is some content

The content box sizing

.first {
  width: 6rem;
  height: 3rem;
  background: red;
}

<div class="first">Here is some content</div>
<div class="second">Here is some content</div>

.second {
  width: 6rem;
  height: 3rem;
  background: red;
  padding: 1rem;
  border: 2px solid blue;
  margin: 1rem;
}

Here is some content

The content box sizing

Here is some content

Content box

Padding box

Border box

Margin box

The content box sizing

Here is some content

Content box

Padding box

Border box

Margin box

Default

Ook vaak gebruikt

.first {
  /* default */
  box-sizing: content-box;
  
  width: 6rem;
  height: 3rem;
}

De content box zal 6rem x 3rem zijn

Andere box sizing

Here is some content

Content box

Padding box

Border box

Margin box

Default

Ook vaak gebruikt

.first {
  /* pas de default box siwing aan. */
  box-sizing: border-box;
  
  width: 6rem;
  height: 3rem;
}

De border box zal 6rem x 3rem zijn

Tip:

Here is some content

Content box

Padding box

Border box

Margin box

Background kleurt altijd de content-box + padding-box ongeacht welke box-sizing je kiest

.first {
  background: purple;
}

Padding

The CSS box model

Padding

padding bepaalt de padding-box bovenop de width en height.

.my-div {
  padding: 2rem;
}

Here is some content

.my-div {
  padding: 2rem 2rem 2rem 2rem;
}

Padding

.my-div {
  padding: 2rem;
}

Here is some content

.my-div {
  padding: 2rem 2rem 2rem 2rem;
}

top right bottom left

top

right

left

bottom

Padding

Here is some content

.my-div {
  padding: 1rem 0rem 4rem 2rem;
}

top right bottom left

top

right

left

bottom

Padding

Here is some content

.my-div {
  padding: 1rem 3rem 1rem 3rem;
}

top right bottom left

top

right

left

bottom

als top = bottom

en right = left

.my-div {
  padding: 1rem 3rem;
}

top right

bottom left

Padding

.my-div {
  padding: 2rem;
}

Here is some content

.my-div {
  padding: 2rem 2rem 2rem 2rem;
}

top right bottom left

top

right

left

bottom

als

top = bottom = right = left

Padding

.my-div {
  padding-top: 2rem;
  padding-right: 2rem;
  padding-bottom: 10rem;
  padding-left: 2rem;
}

Here is some content

.my-div {
  padding: 2rem 2rem 10rem 2rem;
}

top right bottom left

top

right

left

bottom

Padding

.my-div {
  padding: 2rem;
  padding-bottom: 10rem;
}

Here is some content

.my-div {
  padding: 2rem 2rem 10rem 2rem;
}

top right bottom left

top

right

left

bottom

Padding

Border

The CSS box model

Border

Border wordt bovenop de content-box en padding-box toegevoegd

.my-div {
  border: 3px solid blue;
}

Here is some content

Border

.my-div {
  border-top: 3px solid blue;
}

Here is some content

Je kan ook een border bepalen aan 1 kant:

Border

Je kan ook een border bepalen aan 1 kant:

Border

Margin

The CSS box model

Margin

Padding maakt ruimte binnen een element, margin maakt ruimte erbuiten

Here is some content

.my-div {
  margin: 3rem;
}

Margin

Margins hebben een impact op waar het element staat ten opzichte van het vorige element of het parent element

Here is some content

Margin

De magische auto waarde: maximum!

Here is some content

.my-div {
  margin-left: auto;
}

Margin

De magische auto waarde

Here is some content

.my-div {
  margin-left: auto;
  margin-right: auto;
}

Margin

De magische auto waarde werkt vaak niet verticaal, omdat weinig elementen een vaste hoogte meekrijgen.

Ook werkt dit enkel op een voorspelbare manier met display: block elementen!

Oefening @Campus

Canvas test: Box model visuele afmetingen

Sizing units

The CSS box model

Sizing units

Voor tekst: (reeds gezien)

Sizing units

Voor elementen: %

Sizing units

Here is some content

.my-div {
  width: 100%;
}

Voor elementen: %

Sizing units

De % waarde is altijd afhankelijk van de waarde van de parent.

Sizing units

De % waarde is altijd afhankelijk van de waarde van de parent.

Hoe breed is .my-child?

<div class="my-parent">
  <div class="my-child"></div>
</div>

.my-parent {
  width: 300px;
}

.my-child {
  width: 50%;
}

Hoe breed is .my-child?

<div class="my-parent">
  <div class="my-child"></div>
</div>

.my-parent {
  width: 300px;
}

.my-child {
  width: 200%;
}

Hoe breed is .my-child?

<div class="my-parent">
  <div class="my-child"></div>
</div>

.my-parent {
  width: 100%;
}

.my-child {
  width: 50%;
}

Hoe breed is .my-child?

<div class="my-parent">
  <div class="my-child"></div>
</div>

.my-parent {
  width: 50%;
}

.my-child {
  width: 20%;
}

Sizing units

Voor elementen: vw & vh

1vw = 1% van de viewport width

1vh = 1% van de viewport height

Hoe breed is .my-child?

<div class="my-parent">
  <div class="my-child"></div>
</div>

.my-parent {
  width: 50%;
}

.my-child {
  width: 100vw;
}

Hoe breed is .my-child?

<div class="my-parent">
  <div class="my-child"></div>
</div>

.my-parent {
  width: 50%;
}

.my-child {
  width: 100vw;
}

Opdrachten @home

De vos

Frozen

Mario

Uitdaging

Pure CSS toggle

(Enkel voor studenten met voorkennis)

Box backgrounds

The CSS box model

Box backgrounds

Oefening @Campus

A winter night in the forest

Styling the visual box

The CSS box model

Styling the visual box

Web Design Deel 5: The CSS box model

By Evelien Rutsaert

Web Design Deel 5: The CSS box model

Block & inline boxes. The content box sizing. Padding, margin, border & Margin. Sizing Unites, box backgrounds & Styling the visual box.

Web Design Deel 5: The CSS box model

More from Evelien Rutsaert