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 ext3 ext4 区别

    Linux kernel 自 2.6.28 开始正式支持新的文件系统 Ext4. Ext4 是 Ext3 的改进版,修改了 Ext3 中部分重要的数据结构,而不仅仅像 Ext3 对 Ext2 那样,只 ...

  2. 深入C#内存管理来分析值类型&引用类型，装箱&拆箱，堆栈几个概念组合之间的区别

    C#初学者经常被问的几道辨析题,值类型与引用类型,装箱与拆箱,堆栈,这几个概念组合之间区别,看完此篇应该可以解惑. 俗话说,用思想编程的是文艺程序猿,用经验编程的是普通程序猿,用复制粘贴编程的是2B程 ...

  3. nginx虚拟主机配置小结

    nginx的安装在lnmp环境搭建中已经介绍过了,配置文件在安装目录下的conf子目录下,主要主要分成四部分:main(全局设置).server(主机设置).upstream(负载均衡服务器设置).l ...

  4. Django基础，Day9 - 静态文件目录与路径设置说明(eg. images, JavaScript, CSS)

    静态文件路径设置官方说明 1. Make sure that django.contrib.staticfiles is included in your INSTALLED_APPS. 2. In ...

  5. Gdb调试多进程程序

    Gdb调试多进程程序 程序经常使用fork/exec创建多进程程序.多进程程序有自己独立的地址空间,这是多进程调试首要注意的地方.Gdb功能强大,对调试多线程提供很多支持. 方法1:调试多进程最土的办 ...

  6. 原生JS常用代码汇总

    数组相关 var codes = new Array( ); //创建数组codes.length //数组长度 动态插入数组 codes.push(value);

  7. SQL Server遍历表的几种方法

    在数据库开发过程中,我们经常会碰到要遍历数据表的情形,一提到遍历表,我们第一印象可能就想到使用游标,使用游标虽然直观易懂,但是它不符合面向集合操作的原则,而且性能也比面向集合低.当然,从面向集合操作的 ...

  8. UVA-11997 K Smallest Sums

    UVA - 11997 K Smallest Sums Time Limit: 1000MS   Memory Limit: Unknown   64bit IO Format: %lld & ...

  9. vue2.0学习（一）

    1.解决双花括号在初始化时的闪烁,两种方式,一种是<div v-text="name"></div>,将用v-text指令来显示,类似于angular的ng ...

  10. HMac基本介绍

    基本介绍 HMAC(散列消息身份验证码: Hashed Message Authentication Code) 它不是散列函数,而是采用散列函数(MD5 or 或SHA)与共享密钥一起使用的消息身份 ...