Block vs. Inline Elements: The very basics
A lot of confusion surrounds the concept of block and inline elements, and its not unusual for this confusion to persist indefinitely. I’m hopefully going to clarify this tiny but influential difference for everyone in just a few images and with one CSS property.
The first image is a screen capture of the HTML and CSS I’ve used. Note how everything is behaving according to it’s default properties. The headers create line breaks, the anchor tag doesn’t.
The next set of images I’ve set everything to block. Each element is going to have its own line. I’ve made no changes to the HTML, just the CSS.
The third set of images should be equally obvious, each element is set to display: inline.
Now, the OL is making the list indent in, because it’s still applying the 40px of padding the OL has built in. (the browser picks the amount, in FF it’s 40px, it might be different in your browser, and this is one reason for a CSS reset.)
I hope this has cleared a lot of things up for you. If you cant remember if an element is inline or block, just put it next to an element you know the behavior of, and see how it reacts. I’ll save inline-block and the other newer options for another blog post. Those are a lot more complicated and require a longer and more complicated explanation than the basic two.