img margin="10"无效，因margin是css属性而非html属性，浏览器静默忽略；必须用css设置，如margin-left: 10px或margin: 10px，且为确保稳定生效需配合display: block。
为什么直接写 img margin="10" 没用
浏览器会静默忽略这种写法——margin 是 CSS 属性，不是 HTML 属性。旧版 HTML 的 hspace 和 vspace 早已被废弃，现代浏览器根本不识别。所有生效的左右边距控制，必须走 CSS。
margin-left 和 margin-right 怎么用才稳
单独设置左右边距最不容易出错，尤其适合图文混排场景：
- 左浮动图片配
margin-right: 1.5rem;，把文字推开，避免紧贴 - 右浮动图片配
margin-left: 1.5rem;，同理留白 - 多张横向排列的图片，给中间那张加
margin-left: 20px;或最后一张加margin-right: 20px;，比全设margin: 0 20px;更可控 - 若图片是 inline 元素（默认），
margin-left/margin-right仍能生效，但上下边距会受line-height干扰——左右没问题，放心用
margin: 10px 20px 这种简写容易错在哪
两值简写是「上下 / 左右」，不是「左右 / 上下」。新手常误以为 margin: 0 20px 是“左边 0、右边 20px”，实际是：上边距 0、下边距 0、左边距 20px、右边距 20px。
-
margin: 10px 20px→ 上=10px，下=10px，左=20px，右=20px -
margin: 10px 20px 30px→ 上=10px，左/右=20px，下=30px（中间那个值管左右，不是“右”） - 真要只动右边？直接写
margin-right: 20px;，别绕弯 - 负值如
margin-right: -10px;可让文字更贴近图片，但父容器若有overflow: hidden，可能裁掉重叠部分
图片水平居中时，margin: 0 auto 为啥要加 display: block
margin: 0 auto 让左右外边距自动均分，从而实现水平居中——但这只对块级元素有效。而 <img> 默认是 inline 元素，auto 在 inline 上无效。
- 必须搭配
display: block;才能触发居中逻辑 - 完整写法：
img { display: block; margin: 0 auto; } - 如果图片在段落中需保持内联流式布局（比如和文字同行），就别硬套
margin: 0 auto，改用text-align: center包裹它的父容器更合适 - 响应式场景下，
margin: 0 auto配合max-width: 100%是安全组合，避免大图撑破小屏
display: block 这一步——它不显眼，但缺了就等于没设 margin。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
