1

I was making a menu with id menu which had the following set:

display: inline;
height: 200px;

Once I removed display: inline;, height worked again.

Why?

false
  • 10,264
  • 13
  • 101
  • 209
eveo
  • 2,797
  • 15
  • 61
  • 95
  • Possible duplicate: http://stackoverflow.com/questions/8969381/what-is-the-difference-between-display-inline-and-display-inline-block, http://stackoverflow.com/questions/105100/css-display-differences – Taz Nov 11 '12 at 00:18
  • "display: inline means that the element is displayed inline, inside the current block on the same line. Only when it's between two blocks does the element form an 'anonymous block', that however has the smallest possible width." - http://www.quirksmode.org/css/display.html – calvinf Nov 11 '12 at 00:20
  • @eveo please mark one of the answers as accepted. Thanks. – Phill Healey Nov 11 '12 at 13:18

3 Answers3

5
display: inline;

Are usually used to refer to text elements;

From the w3c page:

[inline] Causes an element to generate one or more inline boxes.

Therefore, the height you must set is the line-height property. From the w3c page:

On a block container element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element.

Notice here that you can control only the minimal height of your inline elements

Bruno Vieira
  • 3,884
  • 1
  • 23
  • 35
3

Because the spec says so:

'height' … Applies to: all elements but non-replaced inline elements, table columns, and column groups

line-height, however, does apply to inline elements.

Andrew Marshall
  • 95,083
  • 20
  • 220
  • 214
2

By making something display inline you are effectively making it the same as a span. As such the only valid height value is line-height since you are working on an inline element.

To render height values you would need to use a div tag or force your existing tab to render like a div / object which accepts height attributes. You can do this by setting display:block.

In essence you can render a div to work like a span by setting display:inline, and conversely render a span as effectively a div via display:block.

Span tag are meant for inline styling such as font size, colour, decoration, etc.

Phill Healey
  • 3,084
  • 2
  • 33
  • 67