Four layers around every element
Every HTML element is drawn as four nested rectangles: 1. content — the text or image itself 2. padding — inner space between content and the border 3. border — the visible edge 4. margin — outer space that pushes other elements away Padding is inside the box. Margin is outside. That distinction alone solves most beginner CSS bugs.
analogy
Think of a framed picture on a wall. The picture is content. The mat around it inside the frame is padding. The frame is the border. The empty wall between this frame and the next one is margin.