inline和inline-block有什么区别？

当涉及到 CSS 中的 display 属性时，inline 元素和 inline-block 元素都是用来控制元素的显示类型

1. Inline 元素：

• inline 元素是内联元素，它们不会独占一行，只占据其内容所需的空间。
• 它们会水平排列，并尽量不换行。例如，span、a、em、strong 等元素都是 inline 元素。
• inline 元素不能设置宽度和高度，其宽度由其内容决定。垂直方向上的边距和内边距会影响行高，但不会改变元素在垂直方向上的位置。
• 默认情况下，inline 元素使用基线对齐（baseline alignment），即底部会与相邻文本的基线对齐。

2. Inline-Block 元素：

• inline-block 元素也是内联元素，但可以像块级元素一样具有宽度和高度。
• 它们会水平排列，可以在一行中排列，也可以在多行中换行。例如，input、button、img 等元素默认是 inline-block 元素。
• inline-block 元素可以设置宽度和高度，可以通过设置盒模型属性（例如内边距和边框）来调整元素的大小和布局。
• 默认情况下，inline-block 元素也使用基线对齐，但可以通过设置 vertical-align 属性来改变垂直对齐方式

3. 区别

3.1 水平方向的布局：

• inline 元素会水平排列，并尽量不换行。它们会根据内容自动调整宽度，不能设置宽度和高度。
• inline-block 元素也会水平排列，但可以设置宽度和高度。它们可以像块级元素一样具有多行内容，并且可以通过设置宽度和高度来控制其盒模型。

3.2 盒模型属性：

• inline 元素的盒模型属性（如 padding 和 margin）在水平方向上起作用，但不会影响垂直方向上的布局。
• inline-block 元素的盒模型属性在水平和垂直方向上都起作用，可以设置宽度、高度、内边距和外边距等。

3.3 元素间的空白间距：

• inline 元素之间会有空白间距，这是因为 HTML 中元素之间的空格和换行符会被解释为空白字符。
• inline-block 元素之间也会有空白间距，但可以通过调整 HTML 标记之间的空格和换行符来减小或消除这些间距。

3.4 元素的显示类型：

• inline 元素的显示类型是内联，它们不会独占一行，只占据其内容所需的空间。
• inline-block 元素的显示类型也是内联，但可以像块级元素一样具有宽度和高度，可以在一行中排列，也可以在多行中换行。

4. 总结

• inline 元素是内联元素，水平排列，不会独占一行，不可以设置宽度和高度。
• inline-block 元素是内联块级元素，水平排列，可以设置宽度和高度，可以在一行中排列，也可以在多行中换行。
• 使用 inline 适合不需要设置宽度和高度，只需水平排列的元素。
• 使用 inline-block 适合需要控制宽度和高度，同时水平排列的元素，以及在一行中排列多个元素或需要换行的场景。