Week 2 Technical Blog
When designing a webpage, it is best to keep mindful of the visible and invisible boundaries surrounding each element. The three attributes that control these are margin, border, and padding. These make up what's known as the "box model" with the actual content of the element. The best way to visualize this is to think of framing a photograph and hanging it on the wall. In this analogy, the frame itself would be the border, the insert would be the padding, and the space between other things hanging on the wall would be the margin.
The picture on the left below has margin 7px, border 5px, and padding 10px thick. The picture on the right has margin 15px, border 10px, and padding 2px thick. The border styles are solid and dotted respectively. Here you can see that the photo on the right has a thicker border that's closer to the picture to reflect the smaller padding and larger border sizes. You can also see that the bottom border is slightly higher than that of the left picture. This is caused by the higher margin moving the right picture slightly higher above the imaginary line that these two pictures sit upon (like a shelf).
Both of these pictures below have margin 7px, border 5px, and padding 10px thick. Here the borders are defined in the 4 sides each individually. This may be useful if you wish to have a unique look to the page. You can see that the bottom borders now line up as they have the same margins and therefore sit the same distance from the "shelf".