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. 如何学习Oracle

    如何学习Oracle?分清几个概念是关键     经常有一些Oracle的初学者问到以下几个问题,这里集中解答一下,希望对大家有帮助.   1.如果有一定的数据库基础,知道SQL是怎么回事,即使写不出 ...

  2. Echart的简单例子

    [转载自:http://echarts.baidu.com/echarts2/doc/start.html] <%@ page language="java" content ...

  3. Google Map API V3开发（4）

    Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...

  4. Node.js入门笔记（4）：文件系统（fs）

    文件系统(FileSystem) 文件系统模块 对于文件无外乎创建修改添加. File System - 文件系统模块 - require('fs') fs模块是核心模块,需要使用require导入后 ...

  5. QQ空间HD(6)-实现自定义的选项卡切换效果

    DJTabbarButton.m #import "DJTabbarButton.h" @implementation DJTabbarButton - (instancetype ...

  6. go智能提示（重要）

    使用VIM开发go程序时,智能提示是一个大问题. 最终解决方案是使用 YCM,它是使用 gocode 来进行智能提示的.一切配置好之后,你会发现标准库和第三方库都可以智能提示,但自己写的包却不能,猜想 ...

  7. 都别说工资低了，我们来一起写简单的dom选择器吧！

    前言 我师父(http://www.cnblogs.com/aaronjs/)说应当阅读框架(jquery),所以老夫就准备开始看了 然后公司的师兄原来写了个dom选择器,感觉不错啊!!!原来自己从来 ...

  8. PHP格式化显示文件大小函数

    用filesize() 函数可以返回文件的大小,可是返回值是以字节(B)为单位的,看起来不方便.怎么让它根据文件的大小自动以KB.MB.GB为单位显示呢,用下面这个函数就可以实现了. <?php ...

  9. JS 做时钟

    今天,给大家分享一个用JS做的时钟. <!DOCTYPE html><html> <head> <meta charset="utf-8" ...

  10. iOS开发——高级篇——通讯录

    一.简介 1.如何访问用户的通讯录1)在iOS9之前有2个框架可以访问用户的通讯录AddressBookUI.framework提供了联系人列表界面.联系人详情界面.添加联系人界面等一般用于选择联系人 ...