Fact #1: DIV is a style-able blockhead.
Below are DIVs. You can see that DIV is always 100%-wide to the viewport—that’s what it means to be a block element. You can try resizing your browser to see how these DIVs will automatically adjust their girth sizes.
DIV with red border
DIV with green background
DIV with a lot of styles
DIV with big font
<div style="border: 1px solid red"> DIV with red border</div> <div style="background: green"> DIV with green background</div> <div style="border: 3px solid orange; padding: 5px; margin: 20px; background: brown; color: white"> DIV with a lot of styles</div> <div style="border: 7px solid purple; padding: 20px; margin: 5px; background: cyan; font-size: 12pt"> DIV with big font</div>
You can also see that each DIV has its own styling. Without these, DIVs are just as plain as a white sheet of paper—or perhaps plain-er—and will inherit their parents’ styles.
If you don’t want it to be 100%-wide, you can give it a width (and height too, if you need it), but it will still be a block element (cannot have other elements next to it). Not too sociable, eh?
100px DIV with red border
100px DIV with green background
100px DIV with a lot of styles
100px DIV with big font + height
<div style="width: 100px; border: 1px solid red"> 100px DIV with red border</div> <div style="width: 100px; background: green"> 100px DIV with green background</div> <div style="width: 100px; border: 3px solid orange; padding: 5px; margin: 20px; background: brown; color: white"> 100px DIV with a lot of styles</div> <div style="width: 100px; height: 100px; border: 7px solid purple; padding: 20px; margin: 5px; background: cyan; font-size: 12pt"> 100px DIV with big font + height</div>
With these in mind, let’s compare DIV with SPAN in the next page.
