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 下载百度盘，迅雷离线文件，解压乱码文件的方法。

    首先,利用bypy的自动打包功能,将百度盘里的文件自动存放至app/bypy中,这样文件就是打包形式. 再利用 axel -n 10 "下载地址",将文件下载至本地. 下载地址获取 ...

  2. <<< request.getParameterMap()方法

    request.getParameterMap()方法返回的值,是一个Map类型的,记录着所提交的请求中请求参数和请求参数值的映射关系. 当不知道前台传过来的是什么,且不知道传过来的对象时,可用这个, ...

  3. <<< struts 的一系列介绍

    struts有什么用? 以前使用servlet开发应用系统的人深深感受到在java代码中嵌入大量html代码是一件非常痛苦的事,于是sun推出了JSP,解决了java代码中嵌入html代码的问题.但是 ...

  4. LogStash配置、使用（三）

    LogStash配置 官方文档:https://www.elastic.co/guide/en/logstash/current/index.html 查看yum安装路径 rpm -ql logsta ...

  5. jQuery插件之Cookie插件使用方法~

    一.介绍 1-1.jQuery.Cookie.js插件是一个轻量级的Cookie管理插件.下载地址:jQuery-cookie.js  有需要的朋友,右键另存为即可! 二.使用方法 2-1.引入jQu ...

  6. Aspose.Cells 导出 excel

    Aspose.Cells.Workbook book = new Aspose.Cells.Workbook(); Aspose.Cells.Worksheet sheet = book.Worksh ...

  7. 利用pg_stat_activity进行问题排查

    pg_stat_activity是一个非常有用的视图,可以帮助排查pg的一些问题(如连接数目过多问题).pg_stat_activity每行展示的是一个“process”的相关信息,这里的“proce ...

  8. SQL 查找表名 字段名

    转载:http://www.accessoft.com/article-show.asp?id=6135 经常碰到一些忘记表名称的情况,此时只记得个大概,此时可通过查询系统表Sysobjects找到所 ...

  9. [Data Structure & Algorithm] 八大排序算法

    排序有内部排序和外部排序之分,内部排序是数据记录在内存中进行排序,而外部排序是因排序的数据很大,一次不能容纳全部的排序记录,在排序过程中需要访问外存.我们这里说的八大排序算法均为内部排序. 下图为排序 ...

  10. SSM框架——详细整合教程（Spring+SpringMVC+MyBatis）

    1.前言 使用框架都是较新的版本: Spring 4.0.2 RELEASE Spring MVC 4.0.2 RELEASE MyBatis 3.2.6 2.Maven引入需要的JAR包 2.1设置 ...