在制作网站时，依照UI部门提供的原始稿件，尤其是在要求高度还原设计的情况下，我们常常会遇到这样的情况：在两个input标签之间，或者在input标签与span标签之间，会出现多余的3个像素空白。具体如图所示：
代码如下：
<[id_530445487]>
input{width: 120px; height: 30px;}
style>
<body>
<input type="text" value="空格">
<input type="text" value="测试">
body>我们并未设定页面的边距，却意外发现正文中间存在大约3个象素的空白，这让我感到困惑，一时间不知该如何着手解决这个问题。
原因是，在ff浏览器中（在IE浏览器上这一行为会被屏蔽），它会将代码中的换行符或空白字符解析成所谓的“空文本节点”，因此就产生了我们并不希望出现的空白。
说了这么多，那有没有什么方法可以解决呢？
一、简单粗爆不换行
编写程序时，若能避免在代码中换行，将input等命令集中在一行书写，便可有效消除这一困扰。然而，这样做会使代码的视觉效果大打折扣，不再那么赏心悦目。
二、设置父级块的字体大小为0
这样做同样可以解决问题，代码看起来也相当美观；然而，若你在设置父元素的字体尺寸为零的情况下，仍需展示其他字体，那么可能就需要添加span等标签来对其进行包裹，并且还需要重新调整字体尺寸。
如下：
<style>
body{font-size: 0}
input{width: 120px; height: 30px;}
style>
<body>
<input type="text" value="空格">
<input type="text" value="测试">
body>
三：设置-left为-3象素
此元素从原始位置向左移动了三个像素，因此原先的间隙变得不明显了。
扫一扫在手机端查看
-
Tags : 输入margin-left再输入分号会自动空格
本文链接：https://by928.com/10309.html 转载请注明出处和本文链接！请遵守
《网站协议》
！
我们凭借多年的网站建设经验，坚持以“帮助中小企业实现网络营销化”为宗旨，累计为4000多家客户提供品质建站服务，得到了客户的一致好评。如果您有网站建设、网站改版、域名注册、主机空间、手机网站建设、网站备案等方面的需求，请立即点击咨询我们或拨打咨询热线： 13761152229，我们会详细为你一一解答你心中的疑难。
我们凭借多年的网站建设经验，坚持以“帮助中小企业实现网络营销化”为宗旨，累计为4000多家客户提供品质建站服务，得到了客户的一致好评。如果您有网站建设、网站改版、域名注册、主机空间、手机网站建设、网站备案等方面的需求，请立即点击咨询我们或拨打咨询热线： 13761152229，我们会详细为你一一解答你心中的疑难。
客服1 