The box model describes how much space block tags take up, and how much space there is around them. The relevant properties include margin, border, width, height, min-width, max-width, padding, and so on.
HTML tags are rendered using an "inline" or "block" approach. This is determined by their "display" property, which you can set explicitly. But usually you choose a tag which is one or the other by default. For example, a "div" is a "block" element by default, while a "span" is an inline element by default.
The box model only applies to "block" elements. You cannot set box attributes (like width or border) for inline elements.
I'm not going to draw the pictures here - see the (bold above) "Intro box model" page. And check out the examples in the "Intro box model" to see these in action.
What are the values that go into these "distance" attributes? See MDN: length.
Most common are
Some argue that pixel and physical distances should be avoided don't change when the user tries to "zoom in" i.e. by changing the size of the font. That's why "em" or "%" are common.
There are other tricky things you can do with the boxes ... see MDN: Styling Boxes.
So, where do these boxes get put? Ah, that's the "layout" question ... for another time. :)
