块级元素与行内元素

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

关键区别：

• 格式：默认情况下，块级元素会新起一行。
• 内容：一般块级元素可以包含行内元素和其他块级元素。

一，块级元素

display属性为block的元素。

1. 常见块级元素

• div: 文档分区。
• ul: 无序列表。
• ol: 有序列表
• p： 行。
• audio: 音频播放。
• video: 视频。
• table: 表格。
• header: 区段头或页头。
• h1 ~ h6: 标题。

2. 举个栗子🙋
   

<p>
  hello Jone
</p>

p{
  background-color: #8c8c;
}

二，行内元素

display属性为inline的元素。内元素只占据它对应标签的边框所包含的空间，

1. 常见行内元素：

• i
• a
• strong
• span
• button
• input
• textarea

2. 举个栗子🙋
   

<p>
  this is a block-level <span>element.</span>
</p>

span{
  background-color: #8c8c;
}

参考连接：

1. MDN行内元素
2. MDN块级元素