前端 CSS 面试题, display:inline-block 什么时候会显示间隙?

Step 1

Q:: display:inline-block 什么时候会显示间隙？

A:: 在使用 display: inline-block 布局时，HTML 标签之间的空白字符（如空格、换行符等）会被浏览器渲染为实际的空白间隙。这是因为 inline-block 元素会保留元素之间的空白字符。因此，如果代码中存在空格或换行符，浏览器会渲染它们，从而在两个 inline-block 元素之间产生间隙。

Step 2

Q:: 如何解决 display:inline-block 的间隙问题？

A:: 有几种方法可以解决这个问题：1) 删除 HTML 标签之间的空白字符。2) 使用 HTML 注释来消除空白字符。3) 使用负边距（negative margin）将间隙覆盖。4) 设置父元素的 font-size 为 0，然后为子元素重置 font-size。5) 使用 flexbox 或 grid 布局替代 inline-block。

Step 3

Q:: 为什么 inline-block 会产生间隙？

A:: 这是由于 HTML 标签之间的空白字符（例如空格或换行）在 inline 元素中被渲染为实际的空白。这种行为在 inline-block 元素中也存在，因为 inline-block 元素在布局时仍然会保留周围的空白字符。

Step 4

Q:: display:inline 与 display:inline-block 的区别是什么？

A:: display:inline 元素不会改变元素的宽度和高度，也不会触发块级布局。而 display:inline-block 元素既可以像 inline 元素那样在一行内显示，也可以像 block 元素那样设置宽度和高度。