マージンとパディングの使い分けに基準はありますか?

こんな質問がきました。マージンとパディングの使い分け、結構雰囲気でやってしまってるんですが、どんな基準で使い分けてますか?

マージンとパディングの使い分け、結構雰囲気でやってしまってるんですが、どんな基準で使い分けてますか?

Twitterでこんな質問をいただきました。HTMLとCSSを勉強中の人には参考になるのではないかと思い、記事にしました。以下、質問のやりとりです。

https://eclair.company/media/wp-content/uploads/sites/2/2020/03/eMINOUZ-_400x400.jpg
ぷろぐらまー ぱんだ

マージンとパディングの使い分け、結構雰囲気でやってしまってるんですが、どんな基準で使い分けてますか?

https://eclair.company/media/wp-content/uploads/sites/2/2019/11/seta.jpg
YutoSeta

基本戦略は親子間の余白はpadding、兄弟間の余白はmarginです。そうするとmarginは隣り合わせの余白だから、margin-topやmargin-leftの一方向に対して設定すれば十分になります。親の余白(padding)を設定してから子の余白(margin)を設定するようにすると自ずとそうなりますよ!

https://eclair.company/media/wp-content/uploads/sites/2/2020/03/eMINOUZ-_400x400.jpg
ぷろぐらまー ぱんだ

なるほど! これはめちゃめちゃわかりやすい!

パディングは親要素と子要素の間の余白に使い、マージンは兄弟間の余白をあけるために使う

コーディングをする際に要素と要素の間の余白を全ての要素をパディングのみ、マージンのみで実装することもできますが、
「パディングは親要素と子要素の間の余白に使い、マージンは兄弟間の余白をあけるために使う」
という基準に基づいてコーディングをすると部品の再利用がしやすくなったり、余白の記述が分散しにくくなったりとメリットがでてきます。

親要素のpaddingを設定してから、子要素のmarginを設定するという順番でコーディングすることで綺麗にコーディングができます

また、コーディングをしていると、marginもmargin-rightとmargin-left、margin-topとmargin-bottomのどちらを使えば良いのか、使い分けに迷うシーンがでてきます。こういった場合は大抵はどちらでも良いので、自分の中でどちらかしか使わないとルールを決めておくことでコーディング時に迷いが少なくなり、いろいろな命令混じってコードが読みにくいということも起こりません。

僕は、marginはなるべくmargin-topとmargin-leftのみを使うというルールでコーディングしています。

今日から意識してマージンとパディングを使い分けてみましょう!

この記事をかいてみての感想

https://eclair.company/media/wp-content/uploads/sites/2/2019/11/seta-1.jpg
Yuto Seta

TwitterのDMでもここのコメントでも質問してこのブログを盛り上げてくれると嬉しいです。
ウェブについて勉強している読者の人もひっくるめて、一緒に駆け出しエンジニアが仕事を受注できるスキルが身に付くメディアを育てていけたらと思っています。

今回の質問者のTwitterアカウントはこちら

https://eclair.company/media/wp-content/uploads/sites/2/2020/03/eMINOUZ-_400x400.jpg
ぷろぐらまー ぱんだ

Twitterアカウント:@Program_Panda

京都在住のパンダ / Vue.js / Nuxt.js/ チーム鳥獣戯画 / Something Crew / 関西クリエイターズミートアップ/朝活/ 神戸大 / Apple / Mac / iPad / iPhone @team_chojugiga#プログラミングに疲れた時にご活用ください

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です