Html 输入高度：23px制造<；p>；高度：28px:(

HTML:

我的输入和标签是精确的23px高，但是

是28px：(

当我从输入中删除垂直对齐时，

减少到25px；但仍然不是所需的23px

---

我已将输入[type=radio]上的垂直对齐从文本底部更改为纯底部/顶部；这使父级p正好是23px:）

---

PS：这行代码来自HTML5样板文件重置，因此请注意！

将p的行高降低到19px，或者在输入中添加一个边距底部：-2px

---

使用显示内联工作：

（我在这里使用了内联css）

Microsoft SQL Server 2012 Express-64位

---

希望能有所帮助。

p标签将根据内容大小进行扩展。

---

如果需要，我们必须指定p标签的高度。

我知道这并不能回答您的“为什么？”问题，但使用firebug，我可以通过更改单选按钮的高度，将您的段落高度显示为23px

这是我更改的CSS：

<p style="display:inline;margin:0 0 0px 0;padding:0;clear:both;">
   <input type="radio" value="79" id="SQL:79" name="SQL" maxlength="300" style="display:inline;margin:0 0px 0 0; padding:0; height:19px;border:none; background:none;vertical-align:middle;position:relative;top:-2px;">
   <label for="SQL:79" style="display:inline;">Microsoft SQL Server 2012 Express - 64 bit</label>
</p>

请注意，我已将您的

高度：23px；

更改为

高度：18px

。我无法在网上找到答案，但单选按钮本身可能有一些默认高度。

此处修改了css（simplify:）：

设置输入的高度[type=radio]无法放大其视觉效果 形状。所以我删除了高度

当子元素（输入）的显示为内联或内联块时， 设置父元素的线高度可以对齐子元素 元素垂直居中。但也可以对齐子元素 顶部或底部垂直与垂直对齐

---

我已将输入[type=radio]的垂直对齐方式从文本底部更改为纯底部/顶部

可能有一些填充覆盖了您的样式p、input或labelWait上都没有填充，边距在右侧，而不是底部：D@Jack

输入

只有右边空白，没有底部空白。哈哈，是的，我看到了。当我使用19px时；p仍然是26pxhigh@Stofken阅读编辑，我会将负边距添加到输入中。a-5px边距底部确实使输入保持23px高，现在p也是23px高；我不认为负边际是一个特别优雅的解决方案，但它确实做到了！你知道为什么要使用5px吗？？？@Stofken不知道你必须在什么浏览器中使用-5px？在Chrome中，我能够返回23px的高度和-2px的边距。我也不喜欢使用负利润背后的污名，如果没有不应该使用负边距的情况，那么它们就不会被包括在内：）@Stofken如果我的答案回答了您的问题，请勾选复选标记。这可能会在站点的其他区域导致问题，在这些区域中，指定线高度是足够的。应该对输入进行修改，而不是对p元素本身进行修改。p应保持为块级项，并且当应用内联时，我的p将减少到13px！这是一个解决方案，但我认为解决方案是改变垂直对齐。1。输入没有8px的余量底部，你在哪里看到的？2.我不明白，你是说高度对输入不起作用？3.我知道线条高度可以垂直居中，这就是为什么我将其应用于p，子元素也垂直对齐，但文本底部导致了额外的像素，我看不到。高度对输入有效，但当输入类型为radio时，它不会改变输入的可视大小。因此，我认为没有必要设置高度。

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
}

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
}

<p style="display:inline;margin:0 0 0px 0;padding:0;clear:both;">
   <input type="radio" value="79" id="SQL:79" name="SQL" maxlength="300" style="display:inline;margin:0 0px 0 0; padding:0; height:19px;border:none; background:none;vertical-align:middle;position:relative;top:-2px;">
   <label for="SQL:79" style="display:inline;">Microsoft SQL Server 2012 Express - 64 bit</label>
</p>

input[type="radio"], input[type="checkbox"] {
box-shadow: 0 0 0;
height: 18px;
margin: 0 5px 0 0 !important;
padding: 0 !important;
}

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