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

1、块级元素的盒子会扩展到与父元素同宽:这就是为什么块级元素独占一行的原因了。

2、行内元素的盒子会收缩到包紧其内容:这也是为什么几个连续的行内元素会并排一行的原因。

3、块级元素可以设置 width、height,而行内元素不行,行内元素的宽高是根据其内容定的。

4、块级元素的margin 和 padding 设置没有问题,但是行内元素无法设置上下的 margin 和 padding。

    注:这里要注意,虽然行内元素上下方向的边距对布局没有影响,但是如果设置了上下的 padding ,背景颜色会扩充到上下的内边距中。

5、对于 display: inline-block; 的元素,会像行内元素一样并排在一行,但是可以设置宽高和上下边距。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章