Add box model diagram to box model exercise

Author: NateWr

images/7-box-model.png

@@ -1,10 +1,14 @@
 # CSS Box Model
 
-When the browser builds your webpage, it treats every HTML element as a box. An image box is put next to a text box, which is next to a link box.
+When the browser builds your webpage, it treats every HTML element as a box. An image box is put next to a text box, which is next to a link box. CSS calls this the "box model".
 
-CSS calls this the "box model". You can modify the "box model" with the CSS properties `width`, `height`, `margin`, `padding` and `border`. Search on Google to learn how these properties work, then complete the steps below.
+![Diagram of the CSS box model properties](/images/7-box-model.png)
+
+You can modify the "box model" with the CSS properties `width`, `height`, `margin`, `padding` and `border`. Search on Google to learn how these properties work, then complete the steps below.
 
 1. Find the `.number` rule in `styles.css`. Play around with the CSS properties in this rule to see how they work.
-2. Right now, each message has a large space to its right. Use one of the box model properties you have learned to modify the unread message so that it is positioned on the right, as shown in [this screenshot](/images/7-position.png).
+2. Right now, each message has a large space to its right. Use one of the box model properties you have learned to modify the unread message so that it is positioned on the right, as shown in this screenshot:
+
+![Screenshot of expected positions of read nad unread messages](/images/7-position.png).
 
 _Try this: Add `* { border: 1px solid red; }` to your CSS code. It will show you the box model of every element._