Sprint 2: The Difference between Margin, Border, and Padding
In web development there is a concept called the Box Model, which is comprised of 4 properties:
- Content: this is where the text/images are. The dimensions can be changed using the height and width properties
- Padding: the transparent space around the content, which can be changed using the padding property
- Border: this goes around the padding and acts like a frame. The thickness can be changed using the border-width property
- Margin: the transparent space around the border. The size of this space can be changed using the margin property
An analogy I like to use is that of someone driving:
- The driver is the content, situated at the center
- The car interior is the padding, which cushions the driver
- The car exterior is the border, which is a barrier protecting the driver and engine
- The space around the car is the margin, which is the safe distance between the car and any external hazards