CSS图片左移适配失效求助：设置margin属性未生效

你当前给.pic设置的margin: 50px是给四个方向（上、右、下、左）都添加了50px外边距，不是单纯左移的正确写法，再加上img默认是行内块级元素，容易受文本流影响导致样式不符合预期，试试下面几种方法：

方法1：精准控制左外边距 #

直接指定margin-left来设置左移距离，可按需保留其他方向的外边距：

.pic {
  height: 500px; 
  width: 250px;
  margin-left: 20px; /* 替换成你需要的左移数值 */
  border: 5px solid black;
}

如果要保留上下50px的外边距，只调整左移：

.pic {
  height: 500px; 
  width: 250px;
  margin: 50px 0 50px 20px; /* 顺序为：上、右、下、左 */
  border: 5px solid black;
}

方法2：转为块级元素消除布局干扰 #

把img设置为块级元素，让margin的表现更稳定：

.pic {
  display: block;
  height: 500px; 
  width: 250px;
  margin-left: 20px; /* 自定义左移距离 */
  border: 5px solid black;
}

方法3：负margin实现超边界左移 #

如果需要让图片超出body左侧边界，用负的左外边距：

.pic {
  height: 500px; 
  width: 250px;
  margin-left: -30px; /* 负数值会让图片向左偏移到容器外 */
  border: 5px solid black;
}

额外提示：浏览器默认会给body设置margin: 8px，如果这个默认样式影响了你的布局，可以在CSS开头添加：

body {
  margin: 0;
}

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