”margin”と”padding”とは
よくセットで記述してあり、どちらを扱えばどういう風に変わるのかとてもわかりにくいです。
難しく考えず、これは
シンプルに
marginは〔外側の余白〕 paddingは〔内側の余白〕 と覚えましょう
![marginは〔外側の余白〕 paddingは〔内側の余白〕](https://blog.so-net.ne.jp/_images/blog/_54a/simu/m_box.gif)
”margin”と”padding”の表示の違い
margin:50px;を挿入したときの表示
marginを入れると、外側に余白がうまれます。
![marginを挿入](https://harbotsfield2nd.com/wp-content/uploads/2021/03/E3839EE383BCE382B8E383B3-6088b.png)
padding:20px;を挿入したときの表示
paddingを入れると、内側に余白がうまれます。
![paddingを挿入](https://harbotsfield2nd.com/wp-content/uploads/2021/03/E38391E38387E382A3E383B3E382B0-4d9c9.png)
”margin”と”padding”の記入方法
marginの記入例
□①~④まですべて同じ意味です。
□その時々の用途にあわせて記述の仕方を変えてみてください。
① | margin:12px; (すべて) |
② | margin:12px 12px; (上下 左右) |
③ | margin:12px 12px 12px 12px; (上 右 下 左) |
④ | margin-top:12px; (上) margin-right: 12px; (右) margin-bottom:12px; (下) margin-left:12px; (左) |
paddingの記入例
□⑤~⑧まですべて同じ意味です。
□その時々の用途にあわせて記述の仕方を変えてみてください。
⑤ | padding:12px; (すべて) |
⑥ | padding:12px 12px; (上下 左右) |
⑦ | padding:12px 12px 12px 12px; (上 右 下 左) |
⑧ | padding-top:12px; (上) padding-right: 12px; (右) padding-bottom:12px; (下) padding-left:12px; (左) |
スポンサーリンク