Sprint 2
What is the difference between Margin, Border, and Padding?
Padding is the space between the actual content, and the box it is in. Everything on the web is in boxes next-to and on-top of eachother. So for example you buy a phone online, padding is like the bubble-wrap around your new phone and the postage box it is in.
Now Border has to do with the thickness and style of the postage box around it. Maybe it is a super thick box, so it would take up more space in the postman's van than if it was just a thin plastic bag.
Margin is the space between the whole box and other boxes in the postman's van.
Padding, border and margins can be added in CSS using px, em or as a percentage. It can be applied to the top, right, bottom and left sides of the content.
This image has no padding, boarder or margin. 150px high by 70px wide.
This image only has padding of 10px. Notice how the size of the content has to be smaller to make space for the padding in the box.
This image has a padding of 10px and a black solid border of 2px.
This image has a padding of 10px, a black solid border of 2px and a margin of 10 px all around. Notice how the image is not squared like the other images.
To learn more about this topic please see w3schools for more information.