5 Common mistakes with inline elements
Inline elements contain the vast majority of content in every HTML page, yet are widely misunderstood. Here are 5 facts and common misconceptions about inline elements that will hopefully give you further clarification on this common css element
You may not put a block element inside an inline element.
This is more of an HTML thing than a CSS thing. You would not put a paragraph in the middle of a sentence and you should not put a block element inside an inline element. If you are finding this in your code, you have most likely missed something semantically. [Source]
Padding & Margins
Padding and margins on inline elements do not work like their block bretheren. Left and right paddings and margins will work like people expect, but not top and bottom.
From the CSS2 spec Section 10.8.1 :
Although margins, borders, and padding of non-replaced elements do not enter into inline box height calculation (and thus the line box calculation), they are still rendered around inline boxes. This means that if the height of a line box is shorter than the outer edges of the boxes it contains, backgrounds and colors of padding and borders may "bleed" into adjacent line boxes. However, in this case, some user agents may use the line box to "clip" the border and padding areas (i.e., not render them). [Source]
What's that mean? It means that padding and margins will not add to the height of the inline element, but they will be rendered in the background and border.
Width & height of inline elements
You may not set the width of an inline element. [Source]
Enough said, right? Wrong! If the element is a "replaced inline element", then you may set its width. "A what?" you say? A replaced inline element is an element for which the CSS formatter knows only the intrinsic dimensions. [Source]
Basically, if your tag calls something else (ie. images[img] are replaced by their source [src]) it is a replaced element.
Anonymous inline boxes
Take the following code:
This is some text that you should read!
"This is some text" and "should read!" are anonymous inline boxes. You've been using these all along and never knew it! Anonymous boxes inherit all inheritable properties from their block parent. So What are they good for? Nothing really, I just thought you might like to know that they exist. Maybe when CSS4 comes along we will get some wicked selector to trick them out, but for now, just know they are there, lying, waiting..
Run-in boxes. Inline's tricky brother.
Run-in boxes are a type of conditional box. They can either be block or inline, depending how you use them. With run-in box, if you do not goof with its position (don't float or absolutely position it), then it will become an inline element. If the first sentence of a paragraph is your heading, it will be included in the paragraph, even if it is not in the P tag. The example in the spec can explain it better than I ever could.
http://www.w3.org/TR/1998/REC-CSS2-19980512/visuren.html#run-in
If you have anything else to add about inline elements to help people in the future, leave them in the comments and I will add them to the post and give you due credit!
