html - display:inline with margin, padding, width, height

Question

If I set display:inline for any element then will margin, padding, width, height not affect on that element?

Is it necessary to use float:left or display:block or display:inline-block to use margin, padding, width, height on that element?

Answer 1

Please see "Inline formatting contexts" at the CSS spec for the full explanation.

Basically margin, padding and border can be set on inline-level elements, but they may not behave as you expect. The behavior will probably be OK if there's only one line, but other lines in the same flow will likely exhibit behavior different from your expectations (i.e. padding will not be respected). In addition, your inline box can be broken if it contains breakable elements and reaches the margin of the containing element; in that case, at the point of break, margins and padding will not be respected as well.

Found a nice example of that with lists: http://www.maxdesign.com.au/articles/inline/