CSS/HTML新手求解：边框与图片内容不对齐存在像素偏移如何修复

• 行内图片的默认渲染特性：<img> 属于行内替换元素，默认对齐规则是贴合文本基线，浏览器会在图片底部预留出3~5像素的空间，用来承载文本的降部字符（比如g、y这类带下沉尾巴的字母），这就是图片和父容器底边框之间出现空隙的核心原因
• 无效的百分比边框写法：CSS规范中边框宽度不支持百分比单位，你给#photo设置的border-width: 3%属于无效值，浏览器会自动将其降级为默认的中等边框宽度（约3~4px），不同浏览器的降级计算逻辑不一致，很容易出现四边边框宽度不均、和内部内容错位的问题
• 缺失统一盒模型规则：图片设置了width: 100%，在默认盒模型下，父容器的边框会额外增加元素的总宽度，导致图片实际占比超出容器可用宽度，进一步挤压内容造成偏移

1. 修正图片的默认渲染行为，消除底部空隙
   给容器内的图片添加块级属性，彻底去掉行内元素的基线对齐空隙，顺便加上自适应规则防止图片溢出：

   #photo img {
     display: block;
     width: 100%;
     height: auto;
   }
   

2. 替换不规范的百分比边框写法
   把#photo的边框规则改为固定像素值的简写写法，同时去掉不必要的内边距：

   #photo {
     /* 可根据视觉需求调整px数值，比如2px/6px都可以 */
     border: 4px solid rgb(253, 0, 232);
     padding: 0;
   }
   

3. 全局统一盒模型计算规则
   给页面添加全局基础样式，让所有元素的宽度计算都包含边框和内边距，避免元素撑破容器造成错位：

   * {
     box-sizing: border-box;
   }
   

额外提示：你给#button元素设置的border-width: 2%同样属于无效写法，按照上面的方法替换为固定px值即可，避免按钮边框出现同样的错位问题。

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