2017年2月15日水曜日

またmarginが悪戯した話

当ブログのCSSを編集している際に謎の横スクロールが発生した。一応レスポンシブにしているのでスマホでの表示を確認しようとして発見。ページ内のすべての要素は収まっていてはみ出している要素は見つからないのに横スクロールバーが出てしまう。原因は世のウェブデザイナーを悩ませているmargin。

Bloggerで画像を挿入する際に一部の画像を中央に配置しているが、その画像に対して(勝手に)挿入されていた

  style="margin-left: 1em; margin-right: 1em;"

が悪さをしていた。画像をすべて調べて消すべきだが手間なので

.separator a {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

で退治(多分出来ているはず)。.separatorが他で利用されていると問題が再発するかもしれない。

ここで嘆いている人がいるが、本当にmargin-boxが欲しい。

オーバーに表現するとこんな感じ?

PaddingとMarginが一緒になると悪さするのか?

こうなると何が何だか分からなくなってくる。

大事なことなのでもう一度。ここで嘆いている人がいるが、本当にmargin-boxが欲しい。