Block versus Inline

Today I was tweaking the looks of a website, and I found out the difference between block and inline elements/properties. Block elements start a new "block" (no duh). That means that it adds the element with a space, under the previous element. Inline elements add themselves "inline" with the element previous to it.

These are block elements:

h1,h2,h3,h4,h5,h6

headings

p

paragraphs

blockquote

long quotes that are their own blocks

pre

preformatted text; this element does NOT ignore white space like most other text elements such as paragraphs do

ol,ul,li,dl,dt,dd

ordered list, un-orderd list, list element, dictionary list, dictionary term, dictionary definition

These are some inline elements:

dfn

defining terms; the difference between this and dd is that this vocab word can be inside a paragraph, etc.

code,var,samp,kbd

programming code, variables, sample code, keyboard; these look like code, with the courier font and all...

em

emphasized text (by default it looks italicized, but you can change that using CSS)

strong

strongly emphasized text (by default ti looks bold, but, again, you can change it

q

an inline quotation

By the way, I used dl, dd, and dt for those lists of elements.

For divs, you can use the display property in CSS to specify whether it’s block or inline. For example:

This is the result:

Whereas making the display inline:

And this is the result:

Do you see the difference in the code? (Hint: look at line 10.)