# Box model

• Every HTML element is essentially a rectangular box
• You need to understand the box model in depth to make a nice layout!

# Box info

• Select any element on a random webpage and open Chrome's dev tools (F12) to take a closer look at the box of this element

• Each box (element) consists of four parts:
  • content of the element (can be text, an image, ...)
  • border of the element
  • padding or distance between the content and the border
  • margin or distance between two adjoining elements

# Border

• We already discussed borders in detail on the separate Borders page

# Padding

• In order to specify padding, you can either specify padding-top, padding-right, padding-bottom and padding-left separately, or use the shorthand property padding (recommended)
• The shorthand property padding can have one, two, three (rarely used) or four values:
  • one value: equal distances for all four values
  • two values: first value for top and bottom, second value for left and right
  • three values: first value for top, second value for left AND right, third value for bottom
  • four values: (clockwise values) first value for top, second value for right, third value for bottom and fourth value for left

# Example

# Margin

• Just like for padding, you can either specify margin-top, margin-right, margin-bottom and margin-left separately, or use the shorthand property margin (recommended)

# Example

• The margin of an orange block (.m1) is 1rem (or 14px), the margin of a yellow block (.m2) is 2rem (or 28px)
• The body has a background grid with a spacing of 1rem (or 14px)
• Margins behave somewhat different than paddings
  • For block elements (div, p,hx,article, ...) the real margin (shown in the browser) is the largest top/bottom margin of the two adjacent elements
    
  • For inline and floating elements (img, a,span, ...) the real margin (shown in the browser) is the sum of two adjacent elements
    

# Box-sizing

• By default, the real width/height of an element (shown in the browser) is:
  • real width: width of the element + padding + border
  • real height: height of the element + padding + border
• This is very annoying if you want to place elements nicely next to each other (see later in this course: Flexbox)
• Therefore, we always add an extra style rule (box-sizing: border-box;) to the element that makes the real width/height of the element equal to the (given) width/height of the element (i.e. without the padding and the border). The padding and the border are moved "into" the element, respecting the values of width/height rather than enlarging these values.

# Example

• Take a closer look at the two boxes
  
  
  

   

   

   

  
  
  
  
  
  

   

  
  
  

  .box1, .box2 {
      background-color: rgba(190, 241, 122, .5);
      border: 1rem solid rgba(255, 0, 0, .5);
      width: 20rem;
      padding: 1rem;
      margin: 1rem 0;
  }
  
  .box2 {
      background-color: rgba(122, 239, 241, .5);
      box-sizing: border-box;
  }
  

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  
  • Both elements have a width of 20rem, a padding and border of 1rem
  • Only the second element, with class box2, has the style rule box-sizing: border-box;
  • The real width of the elements:
    • real width of .box1: width property + 2 times the padding + 2 times the border = 24rem (or 24 gridlines)
    • real width of .box2: only the width property = 20rem (or 20 gridlines)

# Universal reset

• The universal selector (the * selector) selects EVERY element on the page
• The universal reset will be used to set some default values for every element on the page
  • Afterwards, you can overwrite these values for every element that needs a different value
  • Place the universal reset always at the top of your CSS file (remember the cascading effect inside a CSS file)

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

# Horizontally centred box

• To keep a web page readable on a large screen, the entire content is often limited to a certain (maximum) width and centred on the page
• To do this you have to:
  • give the container (a block element with all the content) a fixed width or max-width
  • centre the container by setting the margin-left and margin-right to auto

  .container {
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
  }
  

  1
  2
  3
  4
  5
  

# Example 1

# Example 2

• Examine the code in the Sandbox and try to figure out how the page behaves at the different breaking points
• Open the Sandbox in a new browser window https://xbt4z.csb.app/
  • Observe how the background-color of body changes over the different breakpoints
  • Use Chrome's dev tools to examine the width of #container at different breakpoints ( < 600px, >= 600px and < 800px, >= 800px)

# Debugging tip

• Sometimes your layout doesn't look quite as you would expect it to
• Often this has to do with the box model that presents itself differently than expected
• You can add a (temporary) border around one (or more) element(s) to visualise its box(es)
• The disadvantage of this technique is that you influence the complete layout of the box(es) and your overall design
• Let's try it on a random webpage, e.g: mozilla box model info
  • Open Chrome's developer tools
  • Inject a JavaScript that draws a border of 3 pixels around every element on the page and look how the layout shifts 😏
    • Go to the Console tab and paste this code just after the > sign:

document.head.insertAdjacentHTML("beforeend", "<style> * { border: solid  3px rgba(255,0,0,.5) !important; }</style>");

# Outline

• The outline property also draws a border around the outside of an element (outside its border if there is one)
• Because this property is NOT part of the box model, it won’t affect the position of the element or adjacent elements (no shifts take place in the overall layout)
• Let's try it on another random webpage, e.g: mozilla outline info
  • Open Chrome's developer tools
  • Inject a JavaScript that draws an outline of 3 pixels around every element on the page. No shifts in the layout this time 😃
    • Go to the Console tab and past this code just after the > sign:

document.head.insertAdjacentHTML("beforeend", "<style> * { outline: solid  3px rgba(255,0,0,.5) !important; }</style>");

# Outline-offset (optional)

• You can also use the outline property for nice, visual effects in your design
• With a second property, outline-offset, you can move the outline further away (positive number) from the box or even inside (negative number) the box

# Overflow

• What happens if the content of an element doesn't fit within the fixed dimensions (width and height) of the element?
  • By default, the content crosses the boundaries of the box (overflow: visible)
  • You can change this behavior by setting the overflow property to hidden, auto or scroll

# Visible (default)

• The content flows over the box if the height is too small

div {
    background-color: white;
    border: 1px solid gray;
    padding: 1rem;
    height: 190px;
}

# Hidden

• The content is cut off if the height is too small

div {
    background-color: white;
    border: 1px solid gray;
    padding: 1rem;
    height: 190px;
    overflow: hidden;
}

# Auto

• The box only gets a scroll bar if the content exceeds the height

div {
    background-color: white;
    border: 1px solid gray;
    padding: 1rem;
    margin-bottom: 1rem;
    height: 190px;
    overflow: auto;
}

# Scroll

• The box always gets a scroll bar, even if the content fits the height

div {
    background-color: white;
    border: 1px solid gray;
    padding: 1rem;
    margin-bottom: 1rem;
    height: 190px;
    overflow: scroll;
}