-pro-sniper-
New Member
I'm using a text input inline in a paragraph of text. Font size and line height are set up correctly, but unlike the behaviour of other inline elements (a span say) the paragraph expands to fit the height of the text input. The problem is I have two lines sitting next to one another that need to align vertically, one containing a text input another without. Because the paragraphs turn out to be different heights positioning them accurately is a problem as spacing is done to the edge of the paragraph and not the inner inline element. I could just work out the difference and align accordingly, but this seems sure to fail cross browser.The root cause seems to be because I have the line-height of my paragraph set to 0.99em, giving the paragraph a smaller height than the elements inside it. Unfortunately, this is a requirement. I'm seeing this problem in Chrome. I haven't tested elsewhere yet.Take a look at this fiddle to see what I mean:http://jsfiddle.net/MBePU/7/The spans have a green background, the paragraph a red background and the containing divs a grey background. You can see that the second paragraph gets additional spacing (7px in this case)Code is included here for SO:HTML:\[code\]<div><p><span>Hello</span></p></div><div><p><span>Hello</span> <input type="text" value="http://stackoverflow.com/questions/13864043/input"></p></div>\[/code\]CSS:\[code\]body { font-size:62.5%; font-family:Georgia;}div { padding:7px 0; margin-bottom:20px; background:#999;}p { background:#f00; font-size:8.8em; line-height:0.99;}span { background:#0f0;}input { font-family:Georgia; font-size:1em; border:0; background:#fff; margin:0; padding:0; width:215px;}\[/code\]