投稿    登录
  博主录制的Python3爬虫视频教程已发布!详情请戳Python3爬虫视频教程!希望大家支持!非常感谢!

关于HTML内联元素一侧留白的浅谈

HTML 崔庆才 3590浏览 5评论

问题来源

在写代码的时候遇到了如下问题:

使用了bootstrap框架来编写了一个页面,其中input元素两侧留有空白。然而用JS动态添加的同样的元素却不会出现这种情况。具体截图表现如下:

20151226212230

我们可以发现,第一行和而三行的代码是完全一样的,可是呈现的结果是截然不同的。

在线测试样例

大家是不是觉得很奇怪?没错,我也是。中间的那个缝隙是哪里来的呢?

刨根问底

在这里感谢 wonder 同学的大力相助,才得以找到问题的所在。

出现此问题的原因在于:

html中的内联元素在书写代码时,如果两元素代码之间有换行,浏览器会将其解释为空格。而这个空格是会被当作一个空白节点(nodeType等于3的节点,就是文字节点)

所以,因为代码中我使元素呈现 inline 的属性,然后两个代码之间具有换行,所以二者之间出现了空白。正常情况下,二者之间是不应该出现空白的。然而用 jQuery 生成元素的时候,因为是用的 + 连接符,所以换行符被忽略了。也就是代码是连接起来的,所以二者之间便不会出现空白。

解决方法:

1.将原代码中的input写到一行。如下:

2.或者在JS代码中加入换行符。如下:

以上两种方式,解决方法都比较简单实用。其他的改变 padding 或者 margin 的方法就不推荐了。

好了,那么明白了之后,我们肯定要可以举一反三的,来探究一下如果是块级元素会不会这样呢?

举一反三

好的,让我们试一下块级元素如果设置为 inline的话会不会也这样。

把 input 标签改成 div,然后给它加上 display: inline 属性,加一下背景颜色区分,观察一下效果。

代码如下:

观察一下效果

20151226220135

嗯,果然,它的间距还是出现了。

那么改成 display: inline-block 呢?

20151226220326

可见间距还是有的。

我们把 div 的换行去掉,看一下。

20151226220443

Perfect!它已经消失不见了!

以上,在chrome,edge,ie11测试通过。

综述

通过以上研究我们可以得出如下结论:

内联元素,代码中带有换行,会出现空白间距。块级元素,设置了内联样式,且代码中带有换行,也会出现空白间距。

解决方法是删除代码中的换行即可。

以上是在写程序过程中发现的现象,希望能对大家有帮助!

转载请注明:静觅 » 关于HTML内联元素一侧留白的浅谈

喜欢 (16)or分享 (0)

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请狠狠点击下面的

想结交更多的朋友吗?

来进击的Coder瞧瞧吧

进击的Coder

QQ群号 99350970 立即加入

进击的Coder灌水太多?

这里是纯粹的技术领地

激进的Coder

QQ群号 627725766 立即加入

想找人聊天解闷?想要学习干货?

微信公众号进击的Coder为你打造

进击的Coder

微信公众号 扫一扫关注