行内元素和块级元素

块级元素和行内元素的定义

块级元素

总是独占一行。

满足：margin-left+padding-left+border-left+width+border-right+padding-right+margin-right = 父元素width
width，height，padding，margin都可以设置
宽度缺省是它的容器的100%
可以容纳内联元素和其他块元素

行内元素

多个行内元素可以在一行
元素大小由文本决定，设置width，height，margin上下，padding上下无效
只能容纳文本或者其他内联元素

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

行内元素一行可以有多个。块级元素各占据一行。
块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素，只能包含文本或者其它行内元素。
行内元素与块级元素属性的不同，主要是盒模型属性上：行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效

display属性

display属性用于设置元素的类型，主要就是block，inline，inline-block三种。前面提到的块级元素和行内元素分别就是block和inline。

inline-block

该值是新增的值，是行内块元素。如input、img元素。

有 block 元素可以设置宽高的特性
有 inline 元素默认不换行的特性
可以设置 vertical-align（这个垂直对齐属性只对设置了inline-block的元素有效）属性

inline-block存在的问题：存在间隙

    <!-- 写法一 -->
    <div>
        <a href="">我是a1</a>
        <a href="">我是a2</a>
    </div>
    <!-- 写法二 -->
    <div>
        <a href="">我是a1</a><a href="">我是a2</a>
    </div>

写法一中a1和a2之间会产生间隙。这是由于HTML 中的换行符、空格符、制表符等合并为空白符，字体大小不为 0 的情况下，空白符自然占据一定的宽度，使用inline-block或inline会产生元素间的空隙。而写法二没有换行就不会有空隙，但是不符合书写规范。

解决方法

使用负值的margin各个浏览器的负值也不相同，才能完美贴合
在父元素的css中设置word-spacing负值，不同浏览器值也不同

常见的块级元素和行内元素

块级元素： div，form，h1，ul，ol，li，p

行内元素：img，span，input，select，a，em，b，button

Twlig / issuesBlog

行内元素和块级元素 #54