Block-level elements

最新推荐文章于 2021-03-15 23:22:53 发布

weixin_33916256

最新推荐文章于 2021-03-15 23:22:53 发布

阅读量147

点赞数

原文链接：https://my.oschina.net/u/2275100/blog/1537585

版权

2019独角兽企业重金招聘Python工程师标准>>>

Block-level elements

In This Article

HTML (Hypertext Markup Language) elements are usually either "block-level" elements or "inline" elements. A block-level element occupies the entire space of its parent element (container), thereby creating a "block." This article helps to explain what this means.

Browsers typically display the block-level element with a newline both before and after the element. You can visualize them as a stack of boxes. The following example demonstrates the block-level element's influence:

Block-level elementsEdit

HTML

<p>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</p>

CSS

p { background-color: #8ABB55; }

UsageEdit

Block-level elements may appear only within a <body> element.

Block-level vs. inlineEdit

There are a couple of key differences between block-level elements and inline elements:

Formatting

By default, block-level elements begin on new lines, but inline elements can start anywhere in a line.

Content model

Generally, block-level elements may contain inline elements and other block-level elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements.

The distinction of block-level vs. inline elements is used in HTML specifications up to 4.01. In HTML5, this binary distinction is replaced with a more complex set of content categories. The "block-level" category roughly corresponds to the category of flow content in HTML5, while "inline" corresponds to phrasing content, but there are additional categories.

ElementsEdit

The following is a complete list of all HTML block level elements (although "block-level" is not technically defined for elements that are new in HTML5).

Contact information.

Article content.

Aside content.

Long ("block") quotation.

<canvas> HTML5

Drawing canvas.

<dd>

Describes a term in a description list.