Why not an inline element that inherits height from its children?

Question

I am trying to create a rather complex grid of images and information (almost like Pinterest). In particular, I am trying to insert a position into one set of <ul>s directly after another. I have a job, but one aspect is causing problems, so I'm trying to ask about this little piece to avoid complicating the whole problem.

To horizontally align the images and their information, we use inline <li>s with other elements of the level of the built-in block inside them. Everything works correctly for the most part, except that <li>s has almost no height.

The HTML and CSS in JSFiddle is here if you want to link to it in addition to below:

HTML:

 <div> <ul class="Container"> <li> <span class="Item"> <a href="#"><img src="http://jsfiddle.net/img/logo.png"/></a> <span class="Info"> <a href="#">Title One</a> <span class="Details">One Point One</span> </span> </span> </li> <li> <span class="Item"> <a href="#"><img src="http://jsfiddle.net/img/logo.png"/></a> <span class="Info"> <a href="#">Title Two</a> <span class="Details">Two Point One</span> </span> </span> </li> </ul> 

CSS

 .Container { list-style-type:none; } .Container li { background-color:grey; display:inline; text-align:center; } .Container li .Item { border:solid 2px #ccc; display:inline-block; min-height:50px; vertical-align:top; width:170px; } .Container li .Item .Info { display:inline-block; } .Container li .Item .Info a { display:inline-block; width:160px; } 

If you look at the result in the jsfiddle link, you will see that the gray background includes only a small strip of just <li> . I know that changing the <li> to display:inline-block solves this problem, but this is not possible for other reasons.

So, first of all, I'm just looking to see if anyone understands why the inline <li> element has no height. I can not find anything in the specification that explains this. I know that I cannot add height to the inline element, but any explanation of why this is happening that might allow me to fix would be great.

Secondly, if you test the elements using IE Developer Mode, you will see that although the background color is in the right place, the actual location of the <li>'s bounding box is at the bottom of the container in accordance with the hover over the element. I could solve this problem if it were at the top in every browser, but it seems to be changing.

NOTE. In this case, I don’t care about old browsers, but I do not use HTML5 or JavaScript positioning.

Thanks.

Answer 1

Corresponding bit of CSS 2.1 specification section 10.6.1 Inline, non-replaced elements section 10.6 Calculation of heights and fields . It says:

The 'height' property is not applied. The height of the content area should be based on the font, but this specification does not indicate how. UA can, for example, use an em-box or maximum clip and font descender. (The latter ensures that glyphs with parts above or below the em-box still fall into the content area, but lead to boxes of different sizes for different fonts; the first to ensure that authors can control the background style relative to 'line-height', but leads to a picture of glyphs outside their content area.)

The <li> element has an inline style, and it is the only inline unit object that cannot span lines, so the <li> content area is only one line. Therefore, the height of the content area <li> is 1 xf (font height). See http://jsfiddle.net/dh8nU/1/ for a demonstration where increasing font height increased gray space.

The following section says:

The vertical filling, the border and the edge of the embedded, not replaced block, start at the top and bottom of the content area, and has nothing to do with the "line height" . But only line-height is used when calculating line-height of a line. [my emphasis]

When placing large inline elements in an inline element, the line height of the line increases to contain elements of the inline block, but in accordance with the above text, this does not increase the height of the containing inline element.

Answer 2

There is no way to set height in string elements. Internal elements are elements that are on the line and thus inherit the height of the line. Block elements are elements that occupy the entire width and may have width, height, and other elements that simplify their style.

For a detailed explanation in the specifications, see: http://www.w3.org/TR/CSS2/visuren.html#inline-formatting

inline-block makes the element displayed in the line, but you can assign it height and width , and it will expand with the contents inside. I did not use inline-block very often because of this behavior buggy in IE, but these days have already ended: http://www.quirksmode.org/css/display.html

Creating an <li> using inline-block allows this, but you say this is not an option for you. Why not? Another solution is to make these li lock elements and make them float to the left. If you have problems with overlapping content, use the overflow property on the entire ul to make sure that ul is pushing other content.

 ul.Container { list-style-type: none; overflow: hidden; /* so height expands with the floated content */ } ul.Container li { display: block; float: left; ... more styling ... } 

Is this something that solves your puzzle?