Hello
You can set the width of inline elements like
<span>,<em>and<strong>, but you won’t notice any effect until you position them.
a) I thought the width of inline an inline element can’t be set?
b) Assuming width can be set - we won’t notice any effects ( thus the width we specify ) until we position inline element. Position how/where?
c) Why is the width of inline elements apparent only when we “position” them?
thanx
a) The width of an inline element is ignored
b,c) When you "position" an inline element (I assume that means using position:absolute), you are actually making it a block element, whose width is interpreted by the browser
I think it's due to the fact that when you specify position attributes for an "inline" element, the element is no longer being displayed inline and instead is being treated as a block-level element.
That basically means that if you apply position: absolute to inline element, it will become block element and gain width.
As others have mentioned, setting the width (or some other position-related property) of an inline element will cause the browser to then display the element as a block element.
You can explicitly declare this sort of behavior through using the CSS display property. The most common settings are display: inline (default), display: block, and display: none.
A full reference for the display property is available here.
However, it should be noted that the HTML 4.01 specification discourages the use of "overriding the conventional interpretation of HTML elements":
Style sheets provide the means to specify the rendering of arbitrary elements, including whether an element is rendered as block or inline. In some cases, such as an inline style for list elements, this may be appropriate, but generally speaking, authors are discouraged from overriding the conventional interpretation of HTML elements in this way.
There's also the option of display: inline-block, which might give you the best of both worlds. Be careful about cross-browser compatibility, though.