margin-right: 50px 为什么图片看起来向左移动了？
这是一个非常好的问题！表面上看是增加右边的边距，但图片却向左移动了，这涉及到 CSS 盒模型和布局原理。
一、核心原理：盒模型中的空间分配
在 CSS 盒模型中，一个元素占据的总宽度 = 左边距 + 左边框 + 左内边距 + 内容宽度 + 右内边距 + 右边框 + 右边距
css
.img-container {
width: 300px; /* 容器固定宽度 */
text-align: center; /* 图片居中 */}.img-container img {
width: 100px; /* 图片宽度 */
margin-right: 0; /* 初始右边距为0 */}二、示意图：增加 margin-right 前后的变化
初始状态（图片居中）
text
┌─────────────────────────────────────────────┐ │ 容器 (宽度 300px) │ │ ┌─────────────────────────────────────────┐│ │ │ ││ │ │ ┌───────┐ ││ │ │ │ 图片 │ ││ │ │ │100px │ ││ │ │ └───────┘ ││ │ │ ││ │ └─────────────────────────────────────────┘│ └─────────────────────────────────────────────┘ ← 左边剩余空间 → ← 右边剩余空间 → 都是 100px 都是 100px
增加 margin-right: 50px 后
text
┌─────────────────────────────────────────────┐ │ 容器 (宽度 300px) │ │ ┌─────────────────────────────────────────┐│ │ │ ││ │ │ ┌───────┐ ┌────┐ ││ │ │ │ 图片 │ │ │ ││ │ │ │100px │ │50px│ ││ │ │ └───────┘ │右 │ ││ │ │ │边距│ ││ │ │ └────┘ ││ │ └─────────────────────────────────────────┘│ └─────────────────────────────────────────────┘ ← 左边剩余空间 → ← 右边剩余空间 → 50px 100px 图片左边空间变小 → 图片相对向左移动了！
三、为什么图片会向左移动？
关键：容器总宽度是固定的
初始状态：
容器宽度 = 300px
图片宽度 = 100px
剩余空间 = 300 - 100 = 200px
左右各分 100px → 图片居中
增加
margin-right: 50px后：容器宽度仍是 300px（固定）
图片宽度 = 100px（固定）
右边距 = 50px（新增）
图片 + 右边距总宽度 = 100 + 50 = 150px
剩余空间 = 300 - 150 = 150px
左边距 = 150px（比之前多了 50px）
等等，左边距从 100px 变成 150px，图片应该向右移动才对？
四、正确的分析：需要看具体布局方式
实际上，图片向左移动还是向右移动，取决于图片的对齐方式！
场景1：图片是块级元素（display: block）
css
img {
display: block;
margin-left: auto; /* 初始居中 */
margin-right: auto;}初始状态：
margin-left: auto和margin-right: auto让两边平分剩余空间图片居中
增加 margin-right: 50px 后：
右边距固定为 50px
左边距变成
auto（自动填充剩余空间）图片被推向右边 → 图片向右移动
场景2：图片是内联/内联块元素（display: inline-block）且父容器 text-align: center
css
.parent {
text-align: center; /* 父容器文本居中 */}img {
display: inline-block;
margin-right: 0;}初始状态：text-align: center 让图片居中
增加 margin-right: 50px 后：
图片整体（图片本身 + 右边距）作为一个整体
text-align: center让这个整体居中但图片相对于这个整体，由于右边距的存在，图片自身看起来向左偏移了！
五、您的实际情况
根据您的 HTML 结构，图片的父容器是：
html
<div class="mr-u-sm-5 mr-u-md-4 text-one list "> <img src="images/computerArt.png"></div>
在 hmstyle.css 中有这样的规则：
css
.mr-u-sm-3 {
text-align: center; /* 父容器文本居中 */}以及位移效果：
css
.floodOne .text-one:hover img {
margin-right: 50px; /* 增加右边距 */}实际效果分析：
父容器有
text-align: center→ 图片整体在父容器中居中图片是
inline-block或inline元素（受text-align影响）悬停时增加
margin-right: 50px图片整体（图片 + 50px 右边距）仍然居中
但图片自身相对于这个整体向左偏移了 50px
视觉效果：图片向左移动了！
六、直观比喻
想象一个场景：
text
┌─────────────────────────────────────────┐ │ 一张桌子 │ │ ┌─────────────────────────────────────┐│ │ │ ││ │ │ ┌───────┐ ││ │ │ │ 盘子 │ ││ │ │ └───────┘ ││ │ │ ││ │ └─────────────────────────────────────┘│ └─────────────────────────────────────────┘
现在在盘子右边放一本书：
text
┌─────────────────────────────────────────┐ │ 一张桌子 │ │ ┌─────────────────────────────────────┐│ │ │ ││ │ │ ┌───────┐ ┌────┐ ││ │ │ │ 盘子 │ │书 │ ││ │ │ └───────┘ └────┘ ││ │ │ ││ │ └─────────────────────────────────────┘│ └─────────────────────────────────────────┘
桌子中央要放盘子+书这个整体
盘子相对于桌子中心，看起来向左移动了
七、总结
| 问题 | 答案 |
|---|---|
margin-right 增加，为什么图片向左移动？ | 因为父容器有 text-align: center，图片+右边距作为整体居中，增加右边距会挤压图片向左偏移 |
| 核心原理 | 图片和右边距是一个整体，整体居中，内部元素相对偏移 |
| 与直觉相反的原因 | 我们只注意了 margin-right 增加，忽略了父容器的居中属性 |
一句话总结：增加 margin-right: 50px 让图片看起来向左移动，是因为父容器的 text-align: center 让“图片+右边距”这个整体居中，右边距增大时图片自身就被“挤”向了左边