在css布局中,会经常使用的块级元素和行内元素,而且会经常混淆这二者的使用,下面我们就来对这二者做出明确的区别,便于大家区分这二者。
1、位置
块级元素会独占一行,
行内元素不会独占一行,相邻的行内元素会排列在一行,
2.宽高
块级元素可以设置宽高,默认情况下宽度会自动填充父类的宽度,
行内元素不可以设置宽高,宽度随着内容的宽度的变化而变化。
3.内外边距
块级元素可以设置margin,padding
行内元素有水平方向的margin-left,margin-right,padding-left; padding-right;可以生效。但是竖直方向的margin-bottom; margin-top; padding-top; padding-bottom;却不能生效。
4.display
块级:display:block
行内:display:inline;
可以通过修改display属性来切换块级元素和行内元素