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

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

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

效果是这样的:

这里写图片描述


<html>
<head>
<meta charset="utf-8">
<title>无标题文档title>
<style type="text/css">
    span {
        padding:0px;
        margin:0px;
        background:#0f0;
        }
style>
head>

<body>
<span>第一个spanspan><span>这是第二个spanspan>
<hr />
<em>第一个em标签hahaem> <span>第二个spanspan>
<hr />
<em>第一个em标签em>             <em>第二个emem>
<hr>
<span>第一个span标签span>
<span>第二个span标签span>
<br /><br />
<a>第一个a标签a><a>这是第二个a标签a>
<hr />
<a>第一个a标签hahaa> <a>第二个标签a>
<hr />
<label>第一个label标签label>             <label>第二个labellabel>
<hr>
<label>第一个label标签label>
<strong>第二个strong标签strong>
body>
html>

效果是这样的:

span、a标签之间的换行空白问题_第1张图片

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

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

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



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

相关文章:span,a标签,label标签文字右边的1px空白到底是怎么来的?

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

你可能感兴趣的:(CSS笔记)