第 5 题：行内元素有哪些？块级元素有哪些？空元素有哪些？并说明其区别，行内元素的margin和padding可设置吗？

[janessasmith]

• 行内元素：

  • b, big, i, small, tt；
  • abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var；
  • a, bdo, br, img, map, object, q, script, span, sub, sup；
  • button, input, label, select, textarea。

其中 a, img, button, input, label, select, textarea, b, i标签使用最多。

• 块级元素：

  • div, ol, ul, li, form, p, h1, h2, h3, h4, h5, h6, table, tbody, thead, tfoot, dl, dt, dd, hr, pre, address, blockquote, fieldset, noscript；使用最多
  • header, footer, audio, video, article, aside, section, canvas, hgroup, figure, figcaption, output。这些都是H5标签。

• 空元素：area, base, br, col, colgroup, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr。

解释：

• 块级元素单独成行，排斥其他元素与其处于同一行，可以设置元素的高度、宽度，一般是作为其他元素的容器；
• 行内元素又称内联元素，可以与其他元素处于同一行，不可以设置高度、宽度，高度一般由元素内部的字体大小决定，宽度有内容的长度决定；

CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如div的display默认值为“block”，则为“块级”元素；span默认display属性值为“inline”，是“行内”元素。

• 可以通过display属性改变元素的显示方式。取值为block时，将显示为块级方式呈现；取值为inline时，将以行内形式呈现。如果像让一个元素以行内的形式显示，又可以设置高度和宽度，可以设置值为inline-block。

行内元素的margin、padding可设置吗？

• 行内元素的padding-top、padding-bottom、margin-top、margin-bottom属性设置是无效的；
• 行内元素的padding-left、padding-right、margin-left、margin-bottom属性设置是有效的；
• 行内元素的padding-top、padding-bottom从显示的效果上是增加的，但其实设置的是无效的，并不会对他周围的元素产生任何影响；
• 块级元素的padding和margin值的设置都是有效的；
• 行内元素和块级元素一样，都是盒子模型。