inline（行内）元素的特点：
- 行内元素不会独占一行，多个行内元素会排成一行，直到充满整行之后再换行。
- 行内元素不能设置width和height属性，它的宽和高是元素内容的宽和高。
- 设置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元素的特点：
- 块级元素前后会单独换行。
- 块级元素设置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属性都有效的原因。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
