Forum Moderators: not2easy
inline-block
A block box, which itself is flowed as a single inline box, similar to a replaced element. The inside of an inline-block is formatted as a block box, and the box itself is formatted as an inline box.
Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS 2.1 Inline Blocks</title>
<style type="text/css">
* {margin:0; padding:0;}
body{font-size:100%; width:980px; font-family:Arial, Helvetica, sans-serif; margin-left:1em;}#inlineBlockTest div {display:inline-block; width:190px;height:150px; background:tan;}
</style>
</head><body>
<h1>CSS display : inline-block</h1>
<p>Notice gaps between box's. Margin or padding does not get rid of them.</p>
<p>Looks like the position is determined by the baseline? of the last line of the content.</p>
<p>The last box has no content.</p><!--Start inline-blocks-->
<div id="inlineBlockTest">
<div><p>The inline-block property aligns with the last line of the contents baseline. (p)</p></div>
<div><p>just text (p)</p></div>
<div><h2>Block3 (H2)</h2></div>
<div><h2>Block4 Aligns with bottom of this line (H2)</h2></div>
<div></div>
</div>
<!--End inline-blocks--><h3>Looks same in:</h3>
<ul>
<li>FF 3</li>
<li>OP 9.5</li>
<li>S 3.1</li>
</ul>
<p>Note: Konqueror 3.59 and 4 show the box's all at same Y position ( as if they were float:left; ).
</body>
</html>
Inline-block just means you got an element that displays like an image (inline, replaced element), but in the inside it is like a block element, because it can contain multiple liines and such. It's sort of like a floated div, without having to hug one of the sides (among other attributes) of it's container.
Uhh... what's the point of your example, you didn't explain the purpose.
Can't say I fully understand the purpose anyway, a quick quote from the quirksmode site is it's supposed to be used for inline elements that you want to apply a width to.
Which again doesn't really answer all questions.
And even your 2nd paragraph makes me go eh what where?
I actually didn't know, it did what it does in the example above. Every time I've played with it before, it just happened that the content was on one line only (images, single line links). So it displayed like float:left
So what would I want to use inline-block for?
I'll think of something eventually ;)
What's everyone else going to use it for?
Should also point out konqueror 4.01 does display correctly.
The neat thing is centering. text-align:center and then display:inline-block the children and you can have neat centering going on for e.g. a photo album's thumbnails ...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS Inline block</title>
<style type="text/css">
span {
display: -moz-inline-box; /* For FF<3 */
-moz-box-orient: vertical; /* For FF<3 */
display:inline-block;
width:4em;
/*Try Setting height FF2 still only shows first line*/
/*height:5em;*/
margin-left:0.5em;
background:tan;
}
#ex1 span {vertical-align:top }#ex2 span {vertical-align:middle;}
#ex3 span {vertical-align:baseline}
</style>
<!--[if lt IE 8]>
<style type="text/css" media="screen">
span {display: inline;}
</style>
<![endif]-->
</head><body>
<p id="ex1">It's makes lots more sense<span>You can do stuff like this.</span> now with vertical alignment</p>
<p id="ex2">It's makes lots more sense<span>You can do stuff like this.</span> now with vertical alignment</p>
<p id="ex3">It's makes lots more sense<span>You can do stuff like this.</span> now with vertical alignment</p>
</body>
</html>
-moz-inline-box-moz-box-orientusually inside a "box", think moz's XUL use case - there would invariably be other elements, e.g. an image, a caption, icons.. etc
So in using this you have to be aware that you still have to work within certain limitations until FF3 is the de-facto.
Your case sample shows the clearer reason why the CSS
inline-blockfor moz, though even in this simple case you're going to need a double wrapper, and using box-orient you still don't need a width (which is the step up from the 2005 post ;)), and you can still do it so the paragraph doesn't break with CSS off, simply use another inline element
e.g.
<p id="ex1">It's makes lots more sense<span><em>You can do stuff like this.</em></span> now with vertical alignment</p>
then make the
em {display: block;}Xapti providing the rules are given in the order of the cascade e.g.
then <FF3 will use display property(#1) as it will not recognize inline-block(#3).
FF3 will recognize inline-block and will use #3 to overrule #1,
then because #2 only applies to a moz-box FF3 will not use it either.
that's the theory anyway ;)
-Suzy
