块元素和行内元素

在 HTML 和 CSS 中，元素可以根据其在文档流中的表现方式被分为两种主要类型：块级元素（Block-level elements）和行内元素（Inline elements）。它们在页面布局和样式设计中扮演着不同的角色。

块级元素（Block-level elements）：

1. 特征：

   • 块级元素通常以块的形式显示，占据其父容器的整个宽度，并在父容器中单独显示在新的行上。
   • 块级元素的默认宽度是其父元素的100%。
   • 可以设置宽度、高度、边距、内边距等样式属性。
   • 常见的块级元素包括 <div>、<p>、<h1> 到 <h6>、<ul>、<ol>、<li> 等。

2. 示例：

   <div>
       <p>This is a block-level paragraph.</p>
       <p>This is another block-level paragraph.</p>
   </div>

行内元素（Inline elements）：

1. 特征：

   • 行内元素通常以行内的形式显示，它们不会打断文本流，可以与其他行内元素共享同一行。
   • 行内元素的宽度和高度默认由其内容决定，不可设置宽度和高度。
   • 行内元素的内边距和外边距在垂直方向上不会影响其他元素的布局，水平方向上会影响相邻元素的位置。
   • 常见的行内元素包括 <span>、<a>、<strong>、<em> 等。

2. 示例：

   <p>This is an <span>inline</span> paragraph.</p>

区别总结：

• 块级元素在页面上以块的形式显示，而行内元素则以行内的形式显示。
• 块级元素会独占一行，而行内元素不会。
• 块级元素可以设置宽度、高度、边距、内边距等样式属性，而行内元素的宽度和高度由内容决定，不可设置。
• 块级元素可以包含其他块级元素和行内元素，而行内元素只能包含其他行内元素和部分行内元素。
• p标签中不能包含任何块元素