Improve Box Model explanation in HTML lesson 3

Author: charlieegan3

html/lesson3/assets/images/box-model.png

@@ -168,22 +168,19 @@ and make the picture a bit smaller
 
 ### What is the box model?
 
-An element can be visualised as a box. The box model tells browsers how the element and its attributes relate to each other.
+An element can be visualised as a box. The box model is a way of describing the stacking of spatial properties of an element, those which effect it's size & spacing on the page. These are: `padding`, `margin`, `border` as well as `height` and `width`.
 
-Characteristics that define the box model are `padding`, `margin`, `border`, `height` and `width`.
+**<span style="color: rgb(130,171,182);">blue</span>** represents the values for `height` and `width`. Typically these values are set implicitly based on the content.
 
-**<span style="color: LightSkyBlue;">blue</span>** is where `height` and `width` are defined. These properties don't always need to be set. By default they will use relevant sizing dimensions based on the inner content.
+**<span style="color: rgb(185,197,124);">green</span>** represents the `padding` &mdash; the space inside the `border`. `padding` adds to the total size of the box. So setting `padding-left: 10px;` and `width: 20px;` would make the element **30px** wide on the page.
 
-**<span style="color: mediumpurple;">purple</span>** shows the `padding` &mdash; the space between the content and the `border`. The padding also adds to the total width of the box. So if you set `padding: 10px;` and `width: 20px;` your element will be **30px** long.
+**<span style="color: rgb(244,211,139);">yellow</span>** is the `border` &mdash; the edge around the content and `padding`. It can be styled in various ways and represents the outer most visible part of an element.
 
-**black** is the `border` &mdash; the edge around the box. Its _thickness_, _style_ and _color_ can be defined.
+**<span style="color: rgb(239,195,144);">orange</span>** is the `margin` &mdash; the spacing outside the border. This separates the element from other elements on the page.
 
-**<span style="color: gold;'">yellow</span>** is the `margin` &mdash; the transparent area around the box. This separates it from other elements.
-
-_only the bottom margin is visible in our example. `padding`, `margin` and `border` can be defined for any or all sides of the box._
-
-![](assets/images/padding_and_margin-bottom.png)
+Note: `padding`, `margin` and `border` can be applied to any combination of sides, below all three are applied in equal measure to all four sides around the content.
 
+![](assets/images/box-model.png)
 
 ### Styling the header