eclairのブログ 
目次
Twitterでこんな質問をいただきました。HTMLとCSSを勉強中の人には参考になるのではないかと思い、記事にしました。以下、質問のやりとりです。
マージンとパディングの使い分け、結構雰囲気でやってしまってるんですが、どんな基準で使い分けてますか？
基本戦略は親子間の余白はpadding、兄弟間の余白はmarginです。そうするとmarginは隣り合わせの余白だから、margin-topやmargin-leftの一方向に対して設定すれば十分になります。親の余白(padding)を設定してから子の余白(margin)を設定するようにすると自ずとそうなりますよ！
なるほど！ これはめちゃめちゃわかりやすい！
コーディングをする際に要素と要素の間の余白を全ての要素をパディングのみ、マージンのみで実装することもできますが、
「パディングは親要素と子要素の間の余白に使い、マージンは兄弟間の余白をあけるために使う」
という基準に基づいてコーディングをすると部品の再利用がしやすくなったり、余白の記述が分散しにくくなったりとメリットがでてきます。
親要素のpaddingを設定してから、子要素のmarginを設定するという順番でコーディングすることで綺麗にコーディングができます。
また、コーディングをしていると、marginもmargin-rightとmargin-left、margin-topとmargin-bottomのどちらを使えば良いのか、使い分けに迷うシーンがでてきます。こういった場合は大抵はどちらでも良いので、自分の中でどちらかしか使わないとルールを決めておくことでコーディング時に迷いが少なくなり、いろいろな命令混じってコードが読みにくいということも起こりません。
僕は、marginはなるべくmargin-topとmargin-leftのみを使うというルールでコーディングしています。
今日から意識してマージンとパディングを使い分けてみましょう！
TwitterのDMでもここのコメントでも質問してこのブログを盛り上げてくれると嬉しいです。
ウェブについて勉強している読者の人もひっくるめて、一緒に駆け出しエンジニアが仕事を受注できるスキルが身に付くメディアを育てていけたらと思っています。
Twitterアカウント：@Program_Panda
京都在住のパンダ / Vue.js / Nuxt.js/ チーム鳥獣戯画 / Something Crew / 関西クリエイターズミートアップ/朝活/ 神戸大 / Apple / Mac / iPad / iPhone @team_chojugiga#プログラミングに疲れた時にご活用ください
コメントを残す