块元素&行内元素

大多数HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时，一般会以新行来开始（和结束）

block元素特色

1 老是在新行上开始；

2 高度，行高以及外边距和内边距均可控制；

3 宽度缺省是它的容器的100%，除非设定一个宽度。

4 它能够容纳内联元素和其余块元素

 

inline元素特色

1 和其余元素都在一行上；

2 高，行高及外边距和内边距不可改变；(margin padding只有左右边距有效，上下无效)

3 宽度就是它的文字或图片的宽度，不可改变

4 内联元素只能容纳文本或者其余内联元素

 

在考虑inline的时候，咱们就须要考虑inline元素究竟是行内可替换元素仍是行内不可替换元素。

讨论margin-top和margin-bottom对行内非替换元素是否其做用:

1. 规范容许margin能够设置到行内元素。

2. 因为向一个行内非替换元素应用margin，对行高没有影响。

3. 而且margin是透明的，因此声明margin-bottom, margin-top没有任何视觉效果。

4. 而对于行内非替换元素应用左右的margin，是有影响的。

讨论margin-top和margin-bottom对行内替换元素是否其做用:

1. 为行内替换元素设置margin会影响行高。

2. 因此margin-top和margin-bottom是有视觉效果的。

3. 对行内替换元素应用左右的margin，也是有影响的。

讨论padding-top和padding-bottom对行内非替换元素是否其做用:

1. 明确是有做用的，能够设置背景颜色看出来。

2. 不会影响block布局。

讨论padding-top和padding-bottom对行内替换元素是否其做用:

1. 明确是有做用的，能够设置背景颜色看出来。

2. 也会影响block布局的。