内联元素的空隙，必须是这样用font-size才可以起到消除空隙的效果，我运行结果消除了，不知道对不对-慕课网

首页课程实战体系课手记专栏慕课教程

内联元素的空隙，必须是这样用font-size才可以起到消除空隙的效果，我运行结果消除了，不知道对不对

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

qq_放纵你江湖_0

2015-11-10 09:23

a,span,em{

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

font-size:16px;

}

div{

display:inline;

font-size:0px;

}

</style>

写回答关注

4回答

李晓健

2015-11-10 09:25:52

已采纳

给一下html结构说明下你要消除哪些空隙。

2 0

qq_放纵你...

非常感谢！

2015-11-10 09:52:44

共 2 条回复 >
echo_kinchao

2015-12-07 13:49:51

父元素给0PX里面的子标签在改字体大小就好

0 0

李晓健: 2015-11-10 12:46:45

这个解决方法比较多

1、把所有的标签都写到一行，不要换行就可以

<!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标签背景颜色都为粉色*/
            font-size:16px;
        }
    </style>
</head>
<body>
<div>
    <a>ldjfl</a><a href="http://www.baidu.com">百度</a><a href="http://www.imooc.com">慕课网</a><span>33333</span><span>44444</span><em>555555</em>
</div>
</body>
</html>

2、使用float

<!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标签背景颜色都为粉色*/
            font-size:16px;
            float: left;
        }
    </style>
</head>
<body>
<div>
    <a>ldjfl</a><a href="http://www.baidu.com">百度</a>
    <a href="http://www.imooc.com">慕课网</a>
    <span>33333</span>
    <span>44444</span>
    <em>555555</em>
</div>
</body>
</html>

还有你的那种方法都可以

0 3

qq_放纵你江湖_0

2015-11-10 09:51:13

<!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标签背景颜色都为粉色*/
font-size:16px;
}
div{
display:inline;
font-size:0px;

}
</style>
</head>
<body>
<div>
<a>ldjfl</a>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.imooc.com">慕课网</a>
<span>33333</span>
<span>44444</span><em>555555</em>

</div>
</body>
</html>

0 1

初识HTML(5)+CSS(3)-升级版

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

1225806 学习 · 18234 问题

查看课程

相似问题

（www.imooc.com强调重点强调）为什么两个内联元素之间有的有空隙，有的没有空隙，不是默认有空隙吗，空隙值多大，怎么消除呢？

回答 4

为什么消除了内联元素的间隔变成这样了

回答 4

运行效果界面不知道怎么的消失了

回答 4

内联元素之间的间距问题怎么消除

回答 2

内联元素对padding 为什么有效果而且是正确的效果？

回答 5

打开慕课网App查看更多内容