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对非文字行内块的影响的更多相关文章

  1. 行内块和文字垂直对齐vertical-agign

    vertical-align 垂直对齐 (对于块级元素无效,主要用来控制表单或者图片与文字对齐的) 图片和文字默认是基线对齐 属性: baseline 基线 top 顶线 middle 中线 bott ...

  2. 解决行内块元素（inline-block）之间的空格或空白问题

    一.问题产生 由于html代码格式化后,标签会缩进或者换行.由于浏览器默认处理导致元素在页面显示中出现单个空格问题,尤其在行内或者行内块元素布局时影响比较明显 例如: 代码 页面显示 二.解决方案 这 ...

  3. CSS(3)---块级标签、行内标签、行内块标签

    块级标签.行内标签.行内块标签 html中的标签元素三种类型:块级标签.行内标签.行内块标签. 一.概述 1.块级标签 概念 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属 ...

  4. 前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位

    前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位 一丶css选择器的优先级 行内 > id选择器 > 类选择器 ...

  5. 元素显示模式：块元素 & 行内元素 & 行内块元素

    元素显示模式 前言 了解元素的显示模式可以更好的让我们布局页面.了解显示模式需要学习以下三个方面 什么是元素的显示模式 元素显示模式的分类 元素显示模式的转换 什么是元素显示模式 元素显示模式就是元素 ...

  6. CSS基础 行内元素/行内块元素设置垂直对齐方式及常见使用案例

    vertical-align 属性值 效果 baseline 基线对齐 top 顶部对齐 middle 中心对齐 bottom 底部对齐 使用案例1:百度搜索框左边和右边底部没有对齐 使用vertic ...

  7. css块级标签、行内标签、行内块级标签

    <html><head lang="en"> <meta charset="UTF-8"> <title>< ...

  8. css块级标签，行内标签，行内块标签的转换（2）

            css块级标签,行内标签,行内块标签的转换 版权声明 本文原创作者:雨点的名字 作者博客地址:https://home.cnblogs.com/u/qdhxhz/ 在基础1中,我详细讲 ...

  9. CSS.02 -- 样式表 及标签分类（块、行、行内块元素）、CSS三大特性、背景属性

    样式表书写位置  内嵌式写法 <head> <style type="text/css"> 样式表写法 </style> </head&g ...

随机推荐

  1. Finite State Machine 是什么？

    状态机(Finite State Machine):状态机由状态寄存器和组合逻辑电路构成,能够根据控制信号按照预先设定的状态进行状态转移,是协调相关信号动       作.完成特定操作的控制中心. 类 ...

  2. dos 固定ip命令

    dos 固定ip命令 ***************************************************************************************** ...

  3. Ｃ＃+　AE　注意问题汇总（不断更新）

    1.AE的COM对象释放问题尤其是IFeatureCursor 建议用 ESRI.ArcGIS.ADF.ComReleaser.ReleaseCOMObject(pObj); 或者 int iRefs ...

  4. 说一说ASCLL和Unicode

    关于字符编码这个展开来说有太多东西了,这里主要是想说一说最常说的ASCLL和Unicode字符编码的问题,这样至少你在用相关函数的时候,可以搞明白参数的真正含义. ASCLL编码 计算机就是0和1的世 ...

  5. 在MySQL向表中插入中文时，出现：incorrect string value 错误

    在MySQL向表中插入中文时,出现:incorrect string value 错误,是由于字符集不支持中文.解决办法是将字符集改为GBK,或UTF-8.      一.修改数据库的默认字符集   ...

  6. unity3D游戏-WorldFight

    计划写一个2D策略类的游戏,玩法类似炉石传说,以收集卡牌为主,不同的地方在于战斗方式类似棋类游戏,而且还有一个技能系统作为补充. ---更新(2015.7.13) v2.0.1更新: 添加了基本AI ...

  7. IntelliJ IDEA 14.x 快捷键/个性化设置

    常用快捷键设置(设置成跟Eclipse差不多) 按照路径:File -> Settings -> Appearance & Behavior -> Keymap -> ...

  8. JavaScript获取浏览器高度和宽度值(documentElement,clientHeight,offsetHeight,scrollHeight,scrollTop,offsetParent,offsetY,innerHeight)

    IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...

  9. PHP求余函数fmod()

    定义和用法 fmod() 函数返回除法的浮点数余数. 语法 fmod(x,y) 参数 描述 x 必需.一个数. y 必需.一个数. 说明 返回被除数(x)除以除数(y)所得的浮点数余数.余数(r)的定 ...

  10. CentOS Linux系统下更改Apache默认网站目录

    引言: Apache默认的网站目录是在/var/www/html,我们现在要把网站目录更改到/home/wwwroot/web1/htdocs,操作如下 准备工作: 创建目录: cd /home mk ...