HTML – 有神秘的底部填充

概述我试图在一些表单元素上做一些相当精确的样式,这个问题让我感到很悲伤. 如果我尝试从< input>中删除填充,边距,边框和轮廓. (使用display：block)使得字段的大小完全由文本确定,输入字段最终具有几个像素额外填充,而不是任何其他块级元素以完全相同的方式设置.这是一个例子： http://jsfiddle.net/nottrobin/b9zfa/ <input class="norma 我试图在一些表单元素上做一些相当精确的样式,这个问题让我感到很悲伤.

如果我尝试从< input>中删除填充,边距,边框和轮廓. (使用display：block)使得字段的大小完全由文本确定,输入字段最终具有几个像素额外填充,而不是任何其他块级元素以完全相同的方式设置.这是一个例子：
http://jsfiddle.net/nottrobin/b9zfa/

<input  value="hello" /><div >hello</div>

渲染：

在该示例中,< div>获得16px的计算高度,而< input>获得19px的计算高度.

我在Chrome 16,firefox 9和Opera 11中获得相同的行为,因此它显然使引擎独立.

我可以通过手动添加高度来解决问题,但我不想这样做,因为我希望设计保持为responsive.

任何人都可以帮助我理解这里发生了什么,以及我如何可靠地确保< input>将跟随它后面的任何块级元素的高度相同？

解决方法 <输入>具有基于字体大小的最小行高.将两个元素设置为更大的行高值,以及完全删除行高.但是,这仍然不允许你有比最小值更小的高度.解决方法是使用第一行伪元素并将其设置为显示：inline-block;.

演示：http://jsfiddle.net/ThinkingStiff/B7cmQ/

CSS：

.normalised:first-line {    display: inline-block;    }

但这并不能解释为什么< input>与< div>的行为不同.甚至-webkit-appearance：none;没有解决它.似乎在输入上有一些看不见的伏都教将其内容视为内联.内联元素具有基于字体大小的最小行高,这是我们在这里看到的行为.这就是为什么第一线修复它的原因.它似乎是< input>的“child”元素的样式.

这是一个演示,显示内联元素的最小行高. < div>元素荣誉行高：7px;. < span>,即使其计算值显示为7px;,也不会在视觉上表现出来.

演示：http://jsfiddle.net/ThinkingStiff/zhReb/

输出：

HTML：

<div ID="container">     <div ID="div-large">div <br />large</div> </div> <div ID="container">     <div ID="div-medium">div <br />med</div> </div> <div ID="container">     <div ID="div-small">div <br />small</div> </div> <div ID="container">     <span ID="span-large">span <br />large</span> </div> <div ID="container">     <span ID="span-medium">span <br />med</span> </div> <div ID="container">     <span ID="span-small">span <br />small</span> </div>

CSS：

#container {     background-color: lightblue;       display: inline-block;     height: 200px;     vertical-align: top; }#div-large {     line-height: 50px; } #div-medium {     line-height: 20px; } #div-small {     line-height: 7px; }#span-large {     line-height: 50px;     vertical-align: top; } #span-medium {    line-height: 20px;     vertical-align: top; } #span-small {    line-height: 7px;    vertical-align: top;}

总结

以上是内存溢出为你收集整理的HTML – 有神秘的底部填充全部内容，希望文章能够帮你解决HTML – 有神秘的底部填充所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。