top-row布局异常：图片未与h1、h3横向并排问题排查

问题回顾 #

要实现top-row区域内图片与h1、h3横向并排，但图片显示在文本上方，h1和h3能正常横向排列，sidebar布局正常。

核心原因分析 #

1. CSS语法错误导致图片尺寸不受控
   查看.fotoPerfil的CSS代码：

.fotoPerfil {
    border-radius: 100%
    max-height:10%;
    max-width:10%;
    width: auto;
    height: auto;
}

border-radius: 100%语句末尾缺少分号，这是CSS语法致命错误——浏览器会将后续的max-height、max-width等属性全部判定为无效，图片会以原始尺寸渲染，远超出top-row的高度限制，直接覆盖在文本上方。

2. inline-block元素默认垂直对齐方式加剧视觉错位
   .top-row span设置为display: inline-block后，默认垂直对齐方式是baseline（基线对齐）。h1、h3这类标题标签自带默认margin和行高，和图片基线对齐时，视觉上会进一步凸显图片偏上的问题。

修复步骤 #

1. 修复CSS语法错误
   给border-radius语句补上分号，让后续尺寸限制属性生效：

.fotoPerfil {
    border-radius: 100%;
    max-height:10%;
    max-width:10%;
    width: auto;
    height: auto;
}

2. 调整垂直对齐方式
   给.top-row span添加垂直居中对齐样式，让图片和文本在同一水平线上：

.top-row span {
    display: inline-block;
    vertical-align: middle;
}

3. 可选优化：移除标题默认边距
   h1、h3自带默认margin，会占用额外空间，可移除避免布局间距混乱：

.top-row h1, .top-row h3 {
    margin: 0;
}

内容的提问来源于stack exchange，提问作者vini.m.oliveira