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. linux 遇见的问题

    Permissions 0644 for '/root/.ssh/id_rsa' are too open.问题 如果出现 Permissions 0644 for '/root/.ssh/id_rs ...

  2. Sublime Text 2 实用快捷键（Mac OS X）

    打开/前往: ⌘T 前往文件 ⌘⌃P 前往项目 ⌘R 前往 method ⌘⇧P 命令提示 ⌃G 前往行 ⌃ ` python 控制台 ——————— 编辑: ⌘L 选择行 (重复按下将下一行加入选择 ...

  3. 【Alpha】阶段汇总

    [项目文档&API文档] PhyLab2.0需求与功能分析改进文档(NABCD) PhyLab2.0设计分析阶段任务大纲(α) 团队个人贡献分分配规则 功能规格说明书 [Phylab2.0]A ...

  4. C#------连接SQLServer和MySQL字符串

    <connectionStrings> <add name="ConnectionStrings" connectionString="Data Sou ...

  5. myBatis foreach详解【转】

    MyBatis的foreach语句详解 foreach的主要用在构建in条件中,它可以在SQL语句中进行迭代一个集合.foreach元素的属性主要有 item,index,collection,ope ...

  6. yii2 composer安装

    安装Yii2 1.安装composer 在命令行输入 curl-sS https://getcomposer.org/installer | php mv composer.phar /usr/loc ...

  7. u盘安装Fedora23

    -2.计划用ultraiso安装 fedora 23 ,然后从windows平台转到Linux平台上. -1.概念理解 硬盘模式:achi(sata) ide (ata) 分区格式:主引导记录(mbr ...

  8. [译] 你该知道的javascript作用域 (javascript scope)(转)

    javascript有一些对于初学者甚至是有经验的开发者都难以理解的概念. 这个部分是针对那些听到 : 作用域, 闭包, this, 命名空间, 函数作用域, 函数作用域, 全局作用域, 变量作用域( ...

  9. linux零基础入门总结

    啊,notepad++贴过来怎么对齐格式这么糟糕呢? #root用户 $普通用户   linux命令 清屏clear翻页清屏  CRT中ctrl+L    reset"清空 CRT中不起作用 ...

  10. FMDB线程安全

    //打开数据库 如果没有就创建    NSString *path = [[NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUse ...