Box and Stream: There are Only Two
Every visual HTML element is either a box, or a stream.
Understanding that distinction, and understanding that all CSS properties can be applied to any HTML element is a fundamental CSS concept.
The best way to understand the difference is with a couple of examples.
A <p> element is a box. It has some default properties, like margins above and around the box, padding within the box, and even things like the default font, spacing and much more. The defaults (which aren't always consistent across browsers) are selected to make sense for a conceptual thing called a "paragraph".
<blockquote>, like <p>, is a box. Its defaults are very much like <p>, with the exception that the left margin, and perhaps the right, are set to greater values. Default settings that make sense when used to implement the concept of a "block quote" or indented text.
Both are boxes.
Here's an example of a blockquote, with its background color set to something visible:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam velit felis, condimentum eu congue ut, pellentesque eu elit. Nulla imperdiet semper orci, sit amet fermentum tellus vehicula vel. Curabitur at eros non mauris euismod aliquam. Nam dolor quam, facilisis ac lacinia ac, aliquam vel lorem. Ut dapibus magna non dolor pellentesque volutpat. Vestibulum porta quam vitae enim imperdiet gravida. Curabitur sit amet enim sem. Etiam sollicitudin ornare rutrum. Phasellus eget erat non magna elementum scelerisque. In congue luctus erat nec pharetra. Aenean nec rutrum sem.
As you can see, the highlighted area, the background, is a rectangle. In fact, often times setting a temporary background color can quickly tell you just where your HTML box element is.
And like all HTML element, every box you open, you need to close. Every <p> needs a </p>.
•
A <b> element is a stream. Rather than defining a rectangular area on the page, a stream applies to a sequence of characters or items from beginning to end.
A <b> element, like <p>, has some default properties - the most notable of course is that it sets the "bold" flag for the text contained within it.
Here's our blockquote again, this time with a <b> within. I'm also going to change the background color on the <b>:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam velit felis, condimentum eu congue ut, pellentesque eu elit. Nulla imperdiet semper orci, sit amet fermentum tellus vehicula vel. Curabitur at eros non mauris euismod aliquam. Nam dolor quam, facilisis ac lacinia ac, aliquam vel lorem. Ut dapibus magna non dolor pellentesque volutpat. Vestibulum porta quam vitae enim imperdiet gravida. Curabitur sit amet enim sem. Etiam sollicitudin ornare rutrum. Phasellus eget erat non magna elementum scelerisque. In congue luctus erat nec pharetra. Aenean nec rutrum sem.
As you can see the stream applies to the characters within it, regardless of how they lay out. There is no box, but rather simply a series of characters to which the stream applies.
•
<div> defines a box with no default properties.
<span> defines a stream with no default properties.
Nothing more, really.
You might ask why this would be useful. In reality these elements rarely get used without some additional attributes, typically either the style= attribute, explicitly defining some properties, or the class= attribute, referencing a collection of properties from a stylesheet definition.
But a box is a box, and a stream is a stream. Knowing which is which matters.
Choose a side.