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

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

（1）
块级元素会单独占一行，默认情况下，其宽度会填满其父元素的宽度；
行内元素不会单独占一行，排在一行，排不下了，才会换行；
行内块元素排在一行，根据宽度，排不下了才会换行。
（2）
块级元素可以设置width、height属性，块级元素设置了宽度仍然独占一行，同一行不允许存在别的元素；
行内元素设置width、height属性无效，它的宽高由内容决定，可以通过display：block;或者display：inline-block转化为块元素再设置宽高；
行内块元素可以设置宽和高。
（3）
块级元素和行内块元素可以设置padding和margin 属性值，
（注：可以通过margin:auto方式实现水平居中；Margin:auto; 和margin：0 auto;是一样的，无论父盒子有没有高度，在垂直方向外边距都是0）；
行内元素的margin和padding 属性，水平方向的padding-left ,padding-right,margin-left,margin-right都会产生边距效果，但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom却不会产生边距效果
（4）
行内块元素（如：img、input、td）排在一行，可以设置宽高，margin、padding属性，块之间有缝隙；
浮动和定位也可以将元素隐性转化为行内块元素，可以设置宽和高，并且元素之间没有缝隙