FEWD - Box Model & More CSS

Screencasts are available here: Using Github to Create, Fork and Clone a Repository & Quick Intro to CSS Padding, Border, & Margin.

Box Model

• Width = width + padding-left + padding-right + border-left + border-right
• Height = height + padding-top + padding-bottom + border-top + border-bottom

Basic example

/* this is a css comment */
/* these comments can be read by anyone */

h1 {
  padding: 20px; /* bubble wrap */
  margin: 20px; /* white space between tags */
  border: 5px solid purple; /* our cardboard box */
}

h2 {
  padding: 50px;
  margin: 2px;
  border: 15px dashed green;
  border-radius: 50px;
}