块元素和行内元素的区别

块元素

div、p、h1、h2、h3、h4、h5、h6、ul、li、ol、dl、pre、hr、table、form

行内元素

a、b、span、i、u、em、strong、sup、sub、big、small、img、input、select、textarea、label、button

区别

• 块元素独占一行
  行内元素显示在同一行，只有一行显示不下了，才会换行

• 块元素设置宽高有效
  行内元素设置宽高度无效，margin，padding设置的上下距离无效

• 为什么img、input是行内元素设置高度有效呢？
  img和input是置换元素，他们的display：inline-block；
  置换元素（replaced element）主要是指 img, input, textarea, select, object 等这类默认就有 CSS 格式化外表范围的元素