This makes no sense to me. Why is the grey box 12px high. Testing in Safari and Firefox?
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>CSS Test</title> </head> <body> <p style='background: #900'> <span style ='font-family: geneva; line-height: 18px; font-size: 10px; margin: 0; padding:0; border: 0; background: #ddd'> The line height of this text is 18px, and the font-size is 10px. Margin, Padding and Border are set to Zero. Now according to Eric Meyer: "the Inline Box will always be equal to the value of the line height, and the content area is the same as the font-size". Why is this grey box 12px high? </span> </p> </body> </html>
Edit: removed the 'So why then is
there a gap between these lines?'. That is obvious. The real point is the 12px high bit.