img 标签的 border 属性已废弃，须用 css 的 border 和 vertical-align（如 middle）解决对齐问题；flex 布局更可靠；建议全局设置 img { box-sizing: border-box; }。
img 标签加 border 为什么没反应
直接写 border="1" 在现代浏览器里基本无效，因为 HTML4 之后这个属性已被废弃，CSS 才是控制边框的唯一可靠方式。浏览器可能忽略它，或者只在怪异模式下生效。
- 用
style="border: 1px solid #ccc;"替代border属性 - 如果用了 CSS 重置（比如
* { border: none; }），得显式覆盖掉 -
img默认是行内元素，加了 border 后容易撑高行高，导致上下文字“飘”起来——这是对齐问题的根源
图片和旁边文字不对齐的常见原因
不是边框本身的问题，而是 img 的 vertical-align 默认值是 baseline，它会把图片底部和父容器内文字的基线对齐，而基线下面还留着 descender 空间（比如 g、y、q 的下延部分），所以看起来像“悬空”或“下沉”。
- 最简解法：
style="vertical-align: middle;"或top/bottom - 如果父容器是 flex 布局，
display: flex; align-items: center;更稳，且自动忽略vertical-align - 避免用
margin-top死调——换字体、换字号就又错位
border-box 模式下边框是否影响图片尺寸
默认 box-sizing 是 content-box，这意味着 width: 200px; border: 2px solid red; 实际占用宽度是 204px。对响应式布局或精确栅格来说，这很容易导致溢出或错行。
- 全局加一句
img { box-sizing: border-box; }能让边框包含在设定宽高中 - 但注意：老版本 IE（box-sizing，不过现在基本不用考虑
- 如果图片本身有
max-width: 100%，加 border 后可能被截断，得配合height: auto和box-sizing一起用
用 background-image 替代 img 标签能避开对齐问题吗
可以，但代价是语义丢失和 SEO/可访问性下降。背景图不会参与文档流，自然没有 baseline 对齐问题，但也就没法被屏幕阅读器识别，也不能右键保存。
- 适合纯装饰性图片，比如图标、分隔线
- 必须用时，记得加
aria-hidden="true"显式声明非内容性 - 如果只是想“让图片和文字视觉居中”，不如老老实实用
vertical-align: middle或 flex，更轻量也更可控
真正麻烦的从来不是加不加 border，而是加完之后整个行盒（line box）怎么重新计算高度和基线——这点连很多写了多年 CSS 的人也会下意识忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
