Every HTML element on a web page occupies a space that can be thought of as a box. In web design terms this is referred to as the "Box Model". This box is composed of four parts: the content, the padding, the border, and the margin.

It is easiest to think of the the box just like a package you would receive from Amazon, or some place. The inner most part of the box is the contents of the package. On your web page, this is the words, image, or video that you are looking at. Around this is is the padding inside the package. Think of this as the area of your package that has wadded paper, or bubble wrap, to protect the contents. Around and defining the package is the actual box, which in web terms is the border. And our fourth part of the box is the area around the box which is called the margin. You usually do not think of this in terms of a package, but it might be thought of as the space between packages that keeps them apart.

If you are a web designer or web developer, all of these box elements can be styled; for example you can set the width or color. And you can see what these look like and play with them inside of Google Chrome Developer Tools. There is even an actual box at the bottom of the styke column of the Elements tab that shows any elements actual box with the margin, border, padding and content area displayed.