css块级元素与行内元素的区别

元素的显示模式

1. 块元素（block）

又称：块级元素
特点：
1. 在页面中独占一行，不会与任何元素共用一行，是从上到下排列的。
2. 默认宽度：撑满父元素。
3. 默认高度：由内容撑开。
4. 可以通过CSS 设置宽高。

2.行内元素（inline）

又称：内联元素
特点:

1. 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列。
2. 默认宽度：由内容撑开。
3. 默认高度：由内容撑开。
4. 无法通过CSS 设置宽高。

3.行内块元素（inline-block）

又称：内联块元素
特点：

1. 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列。
2. 默认宽度：由内容撑开。
3. 默认高度：由内容撑开。
4. 可以通过 CSS 设置宽高。

• 使用原则：

• 注意事项

  1. 行内元素 的 左右内边距是没问题的，上下内边距不能完美的设置（不会占位）。
  2. 但行内元素，左右margin可以完美设置，上下margin设置无效。
  3. margin的值也可以是 auto，如果给一个块级元素设置左右margin都为 auto，该块级元素会在父元素中水平居中，但行内元素不可以。