设置margin-left时仅想移动内部文本却导致整个div偏移如何解决

问题原因 #

margin是作用于元素整体的外边距属性，你将margin-left加在了外层div块级元素上，自然会让整个div盒子向右偏移，该属性不会单独作用于盒子内部的文本内容。

解决方案 #

你可以根据场景选择以下任意一种方法实现文本单独向右偏移：

• 方法1：给目标文本套上独立的行内标签，单独给行内标签设置margin-left
  示例代码：

  <div>
    <span style="margin-left: 20px;">My Header</span>
  </div>
  

  行内元素的外边距只会作用于自身，不会影响外层div的位置，适合需要单独控制部分文本位置的场景。
• 方法2：直接给外层div设置padding-left
  示例代码：

  div {
    padding-left: 20px;
  }
  

  padding是元素的内边距，控制的是元素边框和内部内容之间的间距，设置左内边距后外层div的位置不会变化，内部所有内容都会统一向右偏移。
• 方法3：如果div内只有一行文本，直接使用text-indent属性
  示例代码：

  div {
    text-indent: 20px;
  }
  

  text-indent是专门用于控制块级元素首行文本缩进的属性，刚好适配单行文本次偏移的需求，不需要额外添加标签。

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