span、a标签之间的换行空白问题

来源：互联网发布：测试五官的软件编辑：程序博客网时间：2024/06/05 07:47

我们平时在写行内元素时，经常会不小心换行写个空格啥的，然后就会惊奇的发现浏览器中居然有空格。

<span>第一个span标签</span><span>第二个span标签</span>

效果是这样的：

这里写图片描述

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style type="text/css">    span {        padding:0px;        margin:0px;        background:#0f0;        }</style></head><body><span>第一个span</span><span>这是第二个span</span><hr /><em>第一个em标签haha</em> <span>第二个span</span><hr /><em>第一个em标签</em>             <em>第二个em</em><hr><span>第一个span标签</span><span>第二个span标签</span><br /><br /><a>第一个a标签</a><a>这是第二个a标签</a><hr /><a>第一个a标签haha</a> <a>第二个标签</a><hr /><label>第一个label标签</label>             <label>第二个label</label><hr><label>第一个label标签</label><strong>第二个strong标签</strong></body></html>

效果是这样的：

这里写图片描述

由此我们可以得出这样的结论：只要是在两个行内元素之间添加空格，或者换行在浏览器中的表现都会是一个空格的距离。
这个空格的距离具体是多大呢？它是当前字体大小的一半。

空格宽度 = 当前字体大小/2

例如默认字体大小是16px,那么空格的宽度就是8px。有兴趣的朋友可以去测量一下，但是这里要注意一个问题——测量的时候别忘了算上中文后面的1px（甚至是几px）的空白。关于这个问题我又在前一篇文章中详细介绍，请移步下面链接↓

所有博客已转移至个人博客地址：www.clramw.top

相关文章：span，a标签，label标签文字右边的1px空白到底是怎么来的？

深度好文：清除浮动float的七种方法总结和兼容性处理

0 0