行内元素和块级元素的具体区别是什么?行内元素的 padding 和 margin 可设置吗?

那么问题来了,浏览器还有默认的天生 inline-block 元素(拥有内在尺寸,可设置高宽,但不会自动换行),有哪些?

参考答案:input、img、button、textarea、label。

补充:行内元素与块级元素的核心区别:

  • 块级元素:独占一行,width/height/padding/margin 都可设置;常见的有 div、p、ul、li、h1-h6、section 等。
  • 行内元素:同行显示,宽高由内容决定,width/height 无效,但 行内的水平 padding/margin 有效,垂直方向的 padding/margin 不会推开其它行内元素(只在自己所在行框内产生视觉留白)。

因此问题"行内元素的 padding 和 margin 是否可设置"的答案是:水平方向可设置且有效;垂直方向可设置但不参与布局(不撑开父元素高度、不影响同行其它元素位置)。