HTML/CSS疑问：设置display:inline后h标签仍无法与图标同行？

问题分析 #

你设置display:inline后h标签仍表现为块级，核心原因有两点：

1. h标签默认带有上下外边距（margin），即使设为行内元素，这些外边距也会破坏行内布局的连续性，造成视觉上的错位；
2. display:inline布局本身受空白字符、默认样式影响大，稳定性远不如flex布局。

修正方案（推荐用Flex布局） #

直接修改CSS代码，用flex实现可靠的同行排列，同时满足右对齐需求：

#kanon-r {
    display: flex;
    justify-content: flex-end; /* 对应你需要的整体右对齐 */
    align-items: center; /* 让h标签和图标垂直居中对齐 */
    gap: 8px; /* 元素间的间距，可按需调整 */
}

#kanon-h {
    margin: 0; /* 清除h2默认的上下外边距，避免多余空白 */
}

.icon {
    /* img本身是行内替换元素，flex容器下会自动排列，无需额外设置display */
}

原写法无效的原因 #

• 父容器设display:inline会让容器宽度仅包裹内容，但h2的默认外边距会打破行内布局的连续性；
• align-items是flex容器的属性，给.icon设置这个属性完全无效；
• img本身就是行内替换元素，不需要额外设置display:inline。

内容的提问来源于stack exchange，提问作者Simon