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

原创 _柠檬不萌 随笔 css 118阅读 2018-01-31 16:15:28 举报

常见的块级元素:div,p,ul,li,ol,table,tr,td,h家族,form,address,hr
常见的行内元素:span,strong,font,bold,input,img,label,select,textarea,em,i,br

两者的区别如下:
(1)块级元素会独占一行,其宽度自动填满其父元素的宽度。
行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化。
(2)块级元素可以设置 width , height 属性,即使设置了 width , height 属性也是独占一行的。
行内元素设置 width , height 无效。
(3)块级元素可以设置margin 和 padding。
行内元素水平方向的padding-left,padding-right,margin-left,margin-right 都会产生边距效果,但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。(水平方向有效,竖直方向无效)

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复