码迷,mamicode.com
首页 > 其他好文 > 详细

疑问:line-height对非文字行内块的影响

时间:2016-04-20 23:52:24      阅读:373      评论:0      收藏:0      [点我收藏+]

标签:

line-height:对子元素是非文字的行内块,表现出来的不是垂直居中。目前还不知道具体细节。

技术分享技术分享

可以看出来两个东西不在一行。老师的解释是line-height对非文字元素解释不一样,但是我没懂细节。我只知道我给a和i浮动,就会在一行了。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0;}
li{list-style:none;}
.fl{float:left;}
.list{height:50px;line-height:50px;margin-top:50px;}
.list a{display:inline-block;height:16px;line-height:16px;color:#666;}
.list i{display:inline-block;width:14px;height:16px;
background:url("images/huan.png") no-repeat;}
</style>
</head>
<body>
<div class="list">
<i></i>
<a href="#">换一换</a>
</div>
</body>
</html>

疑问:line-height对非文字行内块的影响

标签:

原文地址:http://www.cnblogs.com/learnings/p/5414882.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!