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

最新推荐文章于 2024-02-21 12:08:13 发布

幻想山外小楼听雨

最新推荐文章于 2024-02-21 12:08:13 发布

阅读量1.2w

点赞数 2

分类专栏： CSS笔记文章标签： a标签 span 行内元素空格 html

本文链接：https://blog.csdn.net/promiseCao/article/details/52675738

版权

CSS笔记专栏收录该内容

19 篇文章 2 订阅

订阅专栏

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

<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

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

幻想山外小楼听雨

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
span、a标签之间的换行空白问题

我们平时在写行内元素时，经常会不小心换行写个空格啥的，然后就会惊奇的发现浏览器中居然有空格。<span>第一个span标签</span><span>第二个span标签</span>效果是这样的：<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style type="text/css"> s
复制链接

扫一扫