[翻译] 行内元素(Inline Elements)

在 HTML 中,内联元素是那些只占用定义元素的标记所包围的空间,而不会破坏内容的流。在本文中,我们将研究HTML内联元素及其与块级元素的区别。

An inline element does not start on a new line and only takes up as much width as necessary.

内联元素不会在新行上启动,只在必要时占用宽度。

行内元素示例

下面这个例子说明了行内元素的作用范围:

<!--HTML-->
<p>This <span>span</span> is an inline element; its background has been colored to display both the beginning and end of the inline element's influence</p>
/* CSS */
span { 
    background-color: #8ABB55; 
}

效果如下:

This span is an inline element; its background has been colored to display both the beginning and end of the inline element’s influence

行内元素与块级元素的区别

内容

一般情况下,行内元素只能包含数据和其他行内元素。

而块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。

格式

默认情况下,行内元素不会以新行开始,而块级元素会新起一行。

行内元素列表

下面的元素都是行内元素:

  • 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

SHARE THIS PAGE

免责声明:本站文章中的观点都是作者个人观点,并没有以任何方式反映他所属机构的意见。

发表评论