块状元素转化的内联元素之间的间距去哪了？222222222222222222222与222222222222222222222之间应该有间距不是么？

源自：12-3 我要和你站一起 - 内联元素

块状元素转化的内联元素之间的间距去哪了？222222222222222222222与222222222222222222222之间应该有间距不是么？

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>行内元素标签</title>

<style type="text/css">

a,span,em{

background:pink;/*设置a、span、em标签背景颜色都为粉色*/

display:block;

display:inline;

}

p{display:inline;}

</style>

</head>

<body>

<p>222222222222222222222</p><p>222222222222222222222</p><p>222222222222222222222</p><p>222222222222222222222</p>

<a href="http://www.baidu.com">百度</a>

<a href="http://www.imooc.com">慕课网</a>

<span>33333</span>

<span>44444</span><em>555555</em>

</body>

</html>

提问者：律生息 2017-01-07 12:51

个回答

_蜡笔小新_

2017-03-13 17:14:41

这问题是回车造成的，你把
```
<p>你好世界</p><p>我的世界</p>
<p>再见世界</p>
```
删去回车变成
```
<p>你好世界</p><p>我的世界</p><p>再见世界</p>
```
间隔就会消失。

ps：类似的问题，比如两张图片放一起，也会因为这个回车造成两张图片有间隔的问题。这时还分浏览器！不同的浏览器有时你删掉回车两图片就没间隔了，有的删了也没用，这时这里用别的办法比如把有关间距设置为负值（有时设置为0还不行）

0
qq_Absurdyears_0

2017-02-04 11:29:01

应该是在一行的原因吧，我的这幅图中你好世界我的世界之间是没有间隔的，而再见世界是有间隔的，下面的百度跟慕课网是有间隔的，而444455555之间是没有间隔的

0
qq_Absurdyears_0

2017-02-03 21:25:52

内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

0
dlool

2017-01-07 13:12:48

......

0