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

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

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

a,span,em{

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

font-size:16px;

}

div{

display:inline;

font-size:0px;

}

</style>

提问者：qq_放纵你江湖_0 2015-11-10 09:23

个回答

李晓健

2015-11-10 09:25:52

已采纳

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

0
echo_kinchao

2015-12-07 13:49:51

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

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>

还有你的那种方法都可以

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>

1