はじめに
親要素に子要素をきれいにかぶせたいのに、子要素が親要素をはみ出てしまうといった経験はありませんか。
私は、画面を作っている最中に出合い、「 違う君はここに収まってほしいの！ 」と思いました。
ということで、自分のためにも解決方法を記録しておきたいと思います。
便利拡張機能の紹介
HTMLの各タグの要素がどこに位置しているのかワンクリックで可視化できる拡張機能があります。 それが、IT大学 という拡張機能です。ぜひご活用ください。
利用前
利用後
拡張機能を利用後も、大手サイトのサイトは見苦しくない気がしています。
本題
今回、私は親要素（手紙の紙）に子要素（記入欄）をかぶせた画面を作成していました。padding を使用すると次の画像のようになんかずれるという事象に遭遇しました。
若干タイトルが中央から右にずれていることがわかりますか？
拡張機能で要素の状態を確認したところ次のようになっていました。
なんだかいらない要素っぽいのが手前にいる気がしますが、今回はおいておきます。
手紙のところに注目していただいきますと、きれいに padding 分右にずれていることがわかります。
今回の解決方法を端的に記述します。
下記の記述のcssを親要素に追加することで改善されました。
sample.css
.letter_content {
box-sizing: border-box;
}
要素がきれいに収まるととても気持ちが良いですね。
今後も試行錯誤しながらより良い画面を作っていきたいものです。
参考文献