HTML Blocks
HTML Block and Inline Elements （HTML块和内联元素）
HTML is composed of different elements that create blocks of web pages. These elements are divided into “block-level” elements and “inline” elements. （HTML由创建网页块的不同元素组成。这些元素分为“块级”元素和“内联”元素。）
It is possible to change an element from block to inline or vice versa using the CSS display property. （可以使用CSS display属性将元素从块更改为内联，反之亦然。）
Block-level Elements
Block-level Elements （块级元素）
A block-level element is an HTML element that starts on a new line and takes up the full available width of its parent element’s horizontal space. This kind of element creates blocks of content (paragraphs, page divisions). The majority of HTML elements are block-level elements. （块级元素是从新行开始的HTML元素，占据其父元素的水平空间的全部可用宽度。此类元素创建内容块（段落、页面划分）。大多数HTML元素都是块级元素。）
Block-level elements are used within the body of an HTML document and can contain inline elements, or other block-level elements. （块级元素在HTML文档正文中使用，可以包含内联元素或其他块级元素。）
Example of a block-level element:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
align-items: center; /* Use another value to see the result */
width: 100%;
height: 200px;
background-color: #1faadb;
}
.flex-container > div {
width: 25%;
height: 60px;
margin: 5px;
border-radius: 3px;
background-color: #8ebf42;
}
</style>
</head>
<body>
<div class="flex-container">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
| Block-level elements: |
|---|
Inline Elements
Inline Elements （内嵌元素）
Unlike block-level elements, inline elements do not start on a new line. They begin within a line and only take up as much width as it is necessary. Inline elements are included as a part of the main text. （与块级元素不同，内联元素不会从新行开始。它们从一条线开始，只占用必要的宽度。内联元素作为主文本的一部分包含在内。）
Inline elements commonly contain other inline elements, or they can be empty. （内联元素通常包含其他内联元素，也可以是空的。）
Example of an inline element:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Heading </h1>
<p>This is Aleq's photo</p>
<img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
</body>
</html>
| Inline elements: |
|---|