margin-left не работает в Firefox

Question

В моем коде margin-left: работает только в других браузерах. В Firefox мне кажется, что мне нужно удваивать каждое значение, которое я задаю для поля left: это работает для других браузеров. Элемент, который мне нужен, это синий круг.

Если я проверяю элемент и изменяю css в инспекторе, а затем я даю margin-left: 60px (мой margin-left: обычно 30px), это работает. То же самое касается 1em (я поставил 2em это работает).

Я только что рассказал о формировании, поэтому я не эксперт, поэтому, если кто-то из вас поймет, где я допустил ошибку, заранее спасибо за сообщение!

Вот мой код

.cercle-logo {
  height: 65px;
  width: 65px;
  color: #5CADD3;
  border: 2px solid #EBEBEB;
  margin-top: 15px;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.cercle-logo:before {
  content: "";
  border: 5px solid white;
  width: 24px;
  height: 24px;
  border-radius: 100%;
  background-color: #5cadd3;
  position: absolute;
  margin-left: 2em;
  box-sizing: border-box;
}

<div>
  <span class="cercle-logo"><i class="fa fa-chart-pie fa-2x"></i></span>
</div>

Answer 1

Спасибо за ваш ответ, но я, возможно, сделал что-то не так, потому что, хотя ваше объяснение было ясным, и «фрагмент кода» работает хорошо (я тестирую его непосредственно в Firefox), когда я пишу в Bracket и проверяю его, он перемещает мой синий круг полностью влево, но на этот раз во всех браузерах ... Я что-то пропустил?

Спасибо, что все равно уделили время!

Answer 2

Некоторые браузеры используют родительский отступ в качестве смещения для дочерних элементов абсолютного положения (это делает Chrome), поскольку очевидно, что вы будете перемещать элемент, используя left,right,top,bottom, а не поля

Скажем, у вас padding-left:20px на родительском элементе, и вы устанавливаете абсолютную позицию на одном из его дочерних элементов, если вы не увидите больших изменений, потому что некоторые браузеры используют эти 20px и добавляют его в качестве смещения left:20px

Одно простое решение состоит в том, чтобы переместить смещение, а затем использовать поля для его увеличения, но я не рекомендую использовать свойство left для его увеличения.

.cercle-logo {
  height: 65px;
  width: 65px;
  color: #5CADD3;
  border: 2px solid #EBEBEB;
  margin-top: 15px;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.cercle-logo:before {
  content: "";
  border: 5px solid white;
  width: 24px;
  height: 24px;
  border-radius: 100%;
  background-color: #5cadd3;
  position: absolute;
  left: 3.7em;
  box-sizing: border-box;
}

<div>
  <span class="cercle-logo"><i class="fa fa-chart-pie fa-2x"></i></span>
</div>