56

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?

Lukas Eder
  • 211,314
  • 129
  • 689
  • 1,509
SourceC
  • 3,829
  • 8
  • 50
  • 75
  • Related / possible duplicate of: http://stackoverflow.com/questions/1085980/inline-elements-with-width?rq=1 (but this is the better question). – Ciro Santilli OurBigBook.com Jan 30 '14 at 10:25
  • Related: [Inline HTML elements don't allow setting "width" - why is that?](https://softwareengineering.stackexchange.com/questions/404472/inline-html-elements-dont-allow-setting-width-why-is-that) – sleske Feb 01 '22 at 08:25

8 Answers8

66

There's also the option of display: inline-block, which might give you the best of both worlds.

Jacob Ford
  • 4,553
  • 5
  • 27
  • 42
charliepark
  • 1,480
  • 2
  • 13
  • 15
  • 4
    Very nice! Here's a nice [compatibility matrix](http://www.quirksmode.org/css/display.html). Today, `display: inline-block` is almost safe to use – Lukas Eder Feb 27 '12 at 15:29
  • Though works, still some pretty janky/unexpected behavior when inserting elements into it dynamically. Not sure why. – bobobobo Nov 18 '13 at 21:51
  • Robert Nyman has a [nice blogpost on inline-block](http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/). – cellepo Oct 24 '14 at 00:23
  • *Sometimes* `inline-flex` can be better, in my case for MDI. – KTibow Apr 17 '22 at 15:44
20

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

Flavius Stef
  • 13,740
  • 2
  • 26
  • 22
  • Great. It's very important to know this when we don't have control over the HTML as in Umbraco Contour generated forms. Thanks mate! – Fabio Milheiro Feb 01 '13 at 14:21
12

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.

forivall
  • 9,504
  • 2
  • 33
  • 58
Donut
  • 110,061
  • 20
  • 134
  • 146
  • 7
    "*setting the width [..] of an inline element will cause the browser to then display the element as a block*". Are you sure? – Oriol Jan 11 '15 at 19:14
  • 30
    "setting the width … will cause the browser to then display the element as a block element" — That's nonsense. You can set the width, but it won't apply to the element. – Quentin Aug 25 '15 at 15:44
  • @donut "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." -- Any authoritative documentation source on this? – Gaurang Patel Mar 26 '18 at 01:21
  • "setting the width … will cause the browser to then display the element as a block element" is FALSE. As @Stef said, "When you "position" an inline element by using position:absolute, you are making it a block element, whose width is interpreted by the browser." You cannot set a width for an inline element. – Reza Apr 11 '18 at 10:44
7

That basically means that if you apply position: absolute to inline element, it will become block element and gain width.

n1313
  • 20,555
  • 7
  • 31
  • 46
2

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.

TJ L
  • 23,914
  • 7
  • 59
  • 77
0

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.

alx lark
  • 784
  • 1
  • 6
  • 21
0

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;

Kartikeya kotnala
  • 1
0

Combining inline-flex and block display elements worked for me. In case someone would like to check a working example, here it is:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>inline demo</title>

    <style>
      .block_0 {
        display: inline-flex;
        width: 18rem;
        padding: 0.5rem;
        background-color: #85C1E9;
      }
      .block_1 {
          display: block;
          width:  4rem;
          padding: 0.5rem;
          background-color: #9B59B6;
      }
      .block_2 {
          display: block;
          width: 8rem;
          padding: 0.5rem;
          background-color: #6495ED;
      }
      .block_3 {
          display: block;
          width:  4rem;
          padding: 0.5rem;
          background-color: #DE3163;
      }
    </style>

  </head>
  <body>
    <p style="text-align: center;">
      <span>some text</span>
      <span class="block_0">
          <span class="block_1">block_1</span>
          <span class="block_2">block_2</span>
          <span class="block_3">block_3</span>
      </span>
      <span>some text</span>
    </p>
  

  </body>
</html>
pok_net
  • 358
  • 3
  • 12