Question

See this jsFiddle…

http://jsfiddle.net/M4FAr/

CSS:

a {display:inline-block;background:gold}
a > * {display:inline-block;margin:0}
p {width:auto;line-height:30px;background:yellowgreen}
div {width:30px;height:30px;background:orangered}​

HTML:

<a>
    <p>left</p>
    <div></div>
</a>​

Now, why does setting height:30px to the div on the right create a gap above the p on the left? And how do I get rid of it?

I just want the container a to be 30 pixels heigh and no more. Also, I want its children to line up.

Answer 1

A simple a > * {float:left} solved my problem…

a {display:inline-block;background:gold}
a > * {margin:0;float:left}
p {line-height:30px;background:yellowgreen}
div {width:30px;height:30px;background:orangered}​