ただのHTMLにバニラでCSSを書いていて、どうしても左端に変な余白が出来てハマりました。
この時読み込んでいたのでは50行あるかないかの小さなCSSだけ。HTMLタグのstyle属性は使っていなかった。
このページにリスト要素は使っていない。
ページはローカル環境で開いていた。
この時Apachを使わずにFinderから直接ブラウザに読み込ませていた。
この現象はChromeで開くと起きるがSafariでは起きないバグだった。
対策１
resetのため、style.cssの先頭にpaddingとmarginの全消しを入れる。
* {
margin: 0;
padding: 0;
}
たいていこれで直るけど治らなかった。
対策２
読み込んでいるjsを全部切る。
治らなかった。
対策3
ずれている要素の子要素を全部消してまだ何かuser-agentが悪さをしていないかみる。
全然わからない。
対策４
Chromeの「キャッシュの消去とハード再読み込み」 （ctrl+Rより強力なキャッシュクリア）を実行
治らなかった。
対策？
ちょうど昼休みの時間だったので一旦諦めて昼寝した。
約１時間後、
起きて戻ってきたら勝手に治っていた
。
なんだろう？まだ変なキャッシュが残っていたんだろうか。
レアケースだと思うけど、ページ内に要素がdivやmainタグ１個しかなくて、marginとpaddingを打ち消し消しているのに余白が消えない人は放置してみるとか、chromeを完全に閉じて開き直すとか、macを再起動するとかしたら治る可能性があるかもしれない。