html - 输入高度 :23px makes height:28px :(

Question

HTML:

<p>
    <input type="radio" id="SQL:79" name="SQL" value="79" maxlength="300">
    <label for="SQL:79">Microsoft SQL Server 2012 Express - 64 bit</label>
</p>

相关CSS:

p {
   line-height:23px; 
   vertical-align:top;
   margin:0 0 8px 0;
   padding:0;
   clear:both
}
input {
   margin:0 5px 0 0; 
   padding:0; 
   height:23px;
}
input[type="radio"] {
   border:none; 
   background:none;
   vertical-align:text-bottom
}
label {
   vertical-align:top
}

我的输入和标签正好是 23 像素高，但是 <p>是 28px :(

当我从输入中删除垂直对齐时，<p>减少到 25px；但仍然不是所需的 23px!

我已经将 input[type=radio] 的垂直对齐方式从 text-bottom 更改为 plain bottom/top；这使得父 p 正好是 23px :)
PS:这行代码来自 HTML5 样板重置，请注意!

Answer 1

将 p 的行高降低到 19px 或添加 margin-bottom: -2px 到输入。

http://jsfiddle.net/EWfyM/

p {
   line-height:23px; 
   vertical-align:top;
   margin:0 0 8px 0;
   padding:0;
   clear:both
}
input {
   margin:0 5px 0 0; 
   padding:0; 
   height:23px;
   margin-bottom: -2px;
}
input[type="radio"] {
   border: none; 
   background:none;
   vertical-align:text-bottom
}
label {
   vertical-align:top
}