区别 | inline | block | inline-block |
---|---|---|---|
名称 | 内联元素 | 块级元素 | 内联块 |
换行 | 不换行,多个内联元素排列在一行,直至空间不够才换行 | 独占一行 | 与内联元素相同 |
大小 | 只与内容有关,无法通过width /height 修改大小 | 可以使用width /height 设置 | 与块级元素相同 |
边距 | 只可设置水平方向的margin , padding | 可设置 | 与块级元素相同 |
补充:
- 块级元素即使设置了宽度,也会独占一行
- 内联元素设置垂直方向的
padding
时,background-color
会标识其padding
区域,但元素高度不会发生变化,也就是不会再垂直方向上“挤压”到其他元素