Когда устанавливаются отступы во внутреннем div, внешний div сдвигается потому, что отступы влияют на размер элемента, изменяя его ширину и высоту. Это приводит к изменению положения остальных элементов на странице.
Margin-top не влияет на расположение внутреннего div потому, что по умолчанию внутренний div имеет значение display: block; что делает его занимать всю доступную ширину. Margin-left же влияет на расположение, поскольку изменяет расположение элемента относительно его левого края.
Чтобы добиться того, чтобы внутренний div отталкивался одновременно от верхней и левой сторон внешнего на определенное расстояние, можно использовать свойство position: absolute; для внутреннего div и задать конкретные значения для свойств top и left. Например, если нужно оттолкнуть внутренний div на 10px от верхнего и левого края внешнего div, можно написать такой код:
```css
.inner {
position: absolute;
top: 10px;
left: 10px;
}
```
Ссылка на ваш код на codepen не указана, поэтому не могу конкретно показать изменения в вашем примере. Надеюсь, что данное объяснение поможет вам понять принципы расположения элементов и достичь желаемого эффекта.