Setting the width of inline elements
HtmlCssXhtmlHtml Problem Overview
> 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?
Html Solutions
Solution 1 - Html
There's also the option of display: inline-block, which might give you the best of both worlds.
Solution 2 - Html
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
Solution 3 - Html
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.
Solution 4 - Html
That basically means that if you apply position: absolute
to inline element, it will become block element and gain width.
Solution 5 - Html
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.
Solution 6 - Html
a. Width of inline elements are ignored.
b. Actually you can apply width to element if set display: inline-block;
but to see results you also should apply overflow: hidden;
.
To have all benefits of inline and block types you can use follow snippet:
display: inline-block;
width: 50%; // or px, em, etc.
overflow: hidden;
text-overflow: ellipsis;
In this case you can manage width and have text ellipsis feature.
Solution 7 - Html
Inline element cannot have width. Width is a property of block element. So to use property of width over an inline element or an element with display type inline set display as inline-block eg: display:inline-block;