Setting the Width of Inline Elements

Setting the width of inline elements

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.

How to set width of a inline element?

To apply width, set css property 'display' to either 'block' or 'inline-block'.

block: the element will sit in a single line. In such case you may want to set float so links are in the same line;

inline-block; the element will have height, width, etc, and multiple elements will sit in the same line (block).

How to set responsive width on inline elements?

You can place your button with fixed dimension inside an element with inline attribute.

input, button are inline, still I can set width and height

Depending on the version of CSS you are looking at, they are either replaced inline elements or they are display: inline-block;. Either way, height and width do apply.

Why does inline-block automatically adjust its width according to it's child's width?

display: inline-block is basically a sweet-spot between display: inline; (which is default for span, strong, em, etc.) and display: block; (which is default for div, p, etc).

Inline elements are built for text and thus they should flow inline with the text, and only be as wide as the text they contain. Thus, you can't set the width of an inline element.

Block elements are made to fill all the available width by default and are thus on their own line rather than flowing inline. This is good for things like paragraphs, but sometimes you want shorter lines so it is possible to adjust the width for block elements.

Inline-block elements are in the middle. They flow inline like display: inline; elements, but you can set the width like display: block; elements.

---

Related Topics