总结inline，inline-block和block元素的区别和特点

inline（行内）元素的特点：

1. 行内元素不会独占一行，多个行内元素会排成一行，直到充满整行之后再换行。
2. 行内元素不能设置width和height属性，它的宽和高是元素内容的宽和高。
3. 设置margin和padding属性时，margin-top，margin-bottom，padding-top，padding-bottom无效。行内元素的padding-top和padding-bottom在浏览器中会显示出效果，但是并没有实际作用，对周围的元素没有影响。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>hah</title>
        <style>
        .box1,
        .box2 {
            border: 2px dashed green;
            
            }
        .box1 {
            margin-bottom: 30px;
            
        }
        .text1,
        .text2 {
            font-size: 14px;
            background: grey;
            
        }
        .text2 {
            padding: 10px;
           
        }
        </style>
    </head>
    <body>
        <div class="box1">
            <span class="text1">this is a test</span>
        </div>
        <div class="box2">
            <span class="text2">this is a test</span>
        </div>
    </body>
</html>

效果：

box2虽然设置了padding，但是并不会因此撑开父元素。
常见的行内元素（span、img、a、lable、input、abbr（缩写）、em（强调）、big、cite（引用）、i（斜体）、q（短引用）、textarea、select、small、sub、sup，strong、u（下划线）、button（默认display：inline-block））

inline-block的特点：

1.设置为inline-block的元素仍然呈现为inline元素，但是其中的内容作为block内容呈现。
2.width，height，margin，padding属性有效。
3.相邻的元素仍然在同一行内排列。

block元素的特点：

1. 块级元素前后会单独换行。
2. 块级元素设置width,height,margin,padding属性有效。

常见的块级元素（div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre，HTML5新增的header、section、aside、footer）

替换元素的特点：

1.浏览器根据元素标签和属性决定显示的内容。

2.替换元素本身没有内容，是空元素。

3.替换元素有内在尺寸，width和height属性有效。

4.替换元素的margin和padding属性有效。

常见的替换元素：
img

input

textarea

select

这就是为什么img,input元素作为行内元素，但width,height,margin和padding属性都有效的原因。