1. PADDING - This is the space INSIDE the element. This space dictates how much room there is between text and the border of your element. Imagine writing on a piece of paper but starting right at the edge of the paper. This makes its feel cramped on the page, but if we leave a space between the edge of the paper, and where we start writing, that space is called padding.
2. BORDER - The outline/edge of the element. What this does is it creates a visible line around the element. The border can help identify or differentiate pieces of information easily, or used to attract focus to a specifiy point. Now imagine that piece of paper we spoke of before with all of our fancy imgainary writing. The edges of that paper is what we would call a border
3. MARGIN - This is the space OUTSIDE the element. What this does is creates space between this element and other elements. Think of it as "personal space" around the element. This can be useful for align items within the page and giving gaps around the edges. Back to our imaginary paper, its looks so nice with its fancy writing, nice spaces between the writing and the edge of the paper (our padding), and the edge of the paper (our border), and it looks so nice! So why don't we frame it in a picture frame. The picture frame is what we would call the margin.
