我有一个div而我正在尝试围绕文字5px – 没有更多,而不是更少 – 但是有一些额外的空间被抛在那里,就像我的浏览器在我的脸上笑着,我徒劳地试图让它做我想要的做.
这是我使用的CSS：
div{
font-family:'Arial',sans-serif;
padding:5px;
font-size:14px;
}
这是我的HTML：
<div>
Sort By:
<select>
<option>Customer</option>
</select>
Search Customer:
<input type="text">
</div>
(顺便说一句,输入和选择字段都没有样式.)
这是我在浏览器窗口中输入的输出
(通过Chrome的开发者控制台突出显示,您可以了解额外的间距)：
html output http://img715.imageshack.us/img715/2438/padding.png
等一下,那里发生了什么事？我已经有5px的填充,然后这个奇怪的内部填充.我在一个图像编辑器中测量过,而且额外的填充或者我应该调用它的是添加一个额外的8px的填充,顶部和底部.
以为这可能是一个线高问题 – 所以我设置为0.没有改变一个事情.尝试将其设置为负数.也没有工作事实上,Chrome与此无关,给了我一个错误.
那么这里有什么额外的东西呢？它有名字吗？我可以收缩吗我想要这些字母周围正好5px的空间,而不是近三倍的13px.
我很感谢帮助 – 提前感谢.
解决方法
表单元素可以扩展包含元素.很难说,因为你没有因为某些原因将它们包含在你的屏幕截图中.
如果设置溢出：隐藏在您的div上,您可能会看到此行为停止.当然,你可能不想要这个;您可能会尝试手动设置这些表单元素的高度,并确保它们具有margin：0 set.
