CSS内联元素(inline)-块级元素(block)

内联元素独占一行

内联元素(inline)：
a – 锚点 
abbr – 缩写 
b – 粗体(不推荐) 
big – 大字体 
br – 换行 
cite – 引用 
code – 计算机代码(在引用源码的时候需要) 
em – 强调 
font – 字体设定(不推荐) 
i – 斜体 
img – 图片 
input – 输入框 
kbd – 定义键盘文本 
label – 表格标签 
q – 短引用 
span – 常用内联容器，定义文本内区块 
strong – 粗体强调 
textarea – 多行文本输入框 

块级元素贴合在一起排列

块级元素(block)：
address – 地址 
blockquote – 块引用 
dir – 目录列表 
div – 常用块级容易，也是CSS layout的主要标签 
dl – 定义列表 
fieldset – form控制组 
form – 交互表单 
h1 – h6 标题 
hr – 水平分隔线 
menu – 菜单列表 
ol – 有序表单 
p – 段落 
pre – 格式化文本 
table – 表格 
ul – 无序列表 
li

内联元素与块级元素的区别

1、内联元素(inline)不会独占一行，相邻的内联元素会排在同一行。其宽度随内容的变化而变化。
2、内联元素不可以设置宽高
3、内联元素可以设置margin，padding，但只在水平方向有效。

块状元素

1、块级元素会独占一行，默认情况下宽度自动填满其父元素宽度
2、块级元素可以设置宽高
3、块级元素可以设置margin，padding

互相之间的区别

区别主要是三个方面:一是排列方式，二是宽高边距设置，三是默认宽度。

(1)块级元素会独占一行，而内联元素和内联块元素则会在一行内显示。

(2)块级元素和内联块元素可以设置 width、height 属性，而内联元素设置无效。

(3)块级元素的 width 默认为 100%，而内联元素则是根据其自身的内容或子元素来决定其宽度。

问题：页面排版的时候经常会遇到li包含img时，图片文件的下边缘出现大概5个或10个像素的间隙

原因：图片文字等inline元素默认是和父级元素的baseline对齐的，而baseline又和父级底边有一定距离（这个距离和 font-size，font-family 相关，不一定是 5px），所以设置 vertical-align:top/bottom/text-top/text-bottom 都可以避免这种情况出现。而且不光li，其他的block元素中包含img也会有这个现象，只要是inline元素和父级元素是baseline的属性的对齐。

html会把图片默认为内联级元素和文字是一样的，那文字的话，给他设置不同的文字大小或字体，肯定会有不同的行高，或者它们会有默认的行高。这样就有了img下面的空隙。

给图片img标签display:block。

img {display:block}

 div {
     width: 110px;
     border: 1px solid #000;
     font-size: 0
    }