Borders
The border of each box cannot be seen. The background of the box is also transparent, this makes it difficult to see the underlying box structure. You can use CSS to make the borders and backgrounds visible and can style them to your liking. When doing this, padding and margins become helpful in getting it spaced the way you like.
Box Padding
Padding adds space between the boxes content and the border of the box. The text of an element always touches the border of the element, which is where you would use padding so the words don’t touch the border. The padding will be the color of the box’s background and adds to the overall size of the box.
Box Margin
The box margin is a little more complex than borders and padding. When the margins are set to zero, the elements inside the box will touch each other. When working with margins you would usually mix units. The left are right margins would be measured in pixels, and the top and bottom margins would be measured in ems.