块元素、行内块和内联元素_两种元素：块和内联

块元素、行内块和内联元素

At the very simplest level, there are two ways elements can display text: block and inline.

在最简单的级别上，元素可以通过两种方式显示文本： block和inline 。

Block elements influence entire sections of content. <p> is a block element: it specifies and sets apart an entire block of text. The heading tags <h1>…<h6> and <address> are also block elements. Visually, block elements will always render their content on separate lines: in other words, forcing a line break.

块元素会影响内容的整个部分 。 <p>是一个块元素：它指定并分开整个文本块。 标题标签<h1>…<h6>和<address>也是块元素。 在视觉上，块元素将始终在单独的行上呈现其内容：换句话说，强制换行。

Inline elements influence text without affecting the content immediately around them. There would be little point that if every time we wanted to render something in italic, the browser forced text onto a new line. Instead, we want to render italic text together with normal text in the same line – that is, inline with the rest of the text.

内联元素会影响文本， 而不会影响它们周围的内容 。 如果我们每次要用斜体显示内容，浏览器都将文本强制换行。 取而代之的是，我们希望在同一行中将斜体文本与普通文本一起呈现，即与文本的其余部分内联 。

Several important final points must be added:

必须添加几个重要的最后一点：

1. Inline elements must always be used in the context of block elements. For example, you cannot use <q> (the quotation tag) by itself to markup a sentence. Instead, it would typically be nested inside a <p> tag that provides a broader context:

   内联元素必须始终在块元素的上下文中使用 。 例如，您不能单独使用<q> ( 引号 )标记句子。 相反，它通常嵌套在提供更广泛上下文的<p>标记内：

   <p><q>Once more unto the breach, dear friends</q>, 
   wrote Shakespeare.</p>

2. While there are exceptions, a good rule for basic text formatting is that block elements may not contain other block elements. While inline tags inside of block tags is perfectly okay:

   尽管有例外 ，但基本文本格式的一个好的规则是，块元素可能不包含其他块元素。 虽然块标记内的内联标记完全可以：

   <h1>The <em>Destiny</em> Corporation</h1>

   This does not make any sense:

   这没有任何意义：

   <p>This is a typical, and wrong-headed, attempt to make 
   text <h1>bigger</h1> in a paragraph</p>

   This is also a common mistake:

   这也是一个常见错误：

   <p><h1>Is this content a heading, or a paragraph?
   It can’t be both, but that’s exactly what the markup 
   surrounding it says.</h1></p>

3. The display property of an element may be changed via CSS: that is, you can turn a tag that is block by default to display inline, and vice-versa. However, that possibility does not change the rules above, which still need to be followed.

   元素的显示属性可以通过CSS进行更改：也就是说，您可以将默认情况下block的标签显示为inline ，反之亦然。 但是，这种可能性不会改变上面的规则，仍然需要遵循这些规则。

翻译自: https://thenewcode.com/373/The-Two-Kinds-of-Element-Block-and-Inline

块元素、行内块和内联元素