Category
Archives
Cocotiie
2006年:Web制作に関する覚書きブログをはじめる。

2018年:Cocotiie(ココッティー)・・・ここちいい(笑)として運営開始。

Trial And Errorの精神で勉強中です。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。
テーマをSWELLにしてリニューアルしましたSWELLについて

[CSS] 基礎 paddingやmargin 値をまとめる

marginやpaddingを指定する際、top,bottom,right.leftの値を個々に書く事もできますが、まとめて書けば もっとすっきり!時短にも繋がりますね。

INDEX

そもそもmargin、paddingとは?

文字、画像などを取り囲む余白の事で、marginは外枠、paddingはその内側です。
つまり3重構造になっていて、中心に文字があり → padding → marginと外側に向かうのです。

一般的な値の書き方のおさらい

以下の書き方では、上下、左右それぞれ20pxの余白が出来ます。

p{
margin:10px;
padding:10px;
}

こんな風に個別に値を書く事も出来ます。

p{
margin-top:10px;
margin-bottom:10px;
margin-left:10px;
margin-right:10px;
padding-top:10px;
padding-bottom:10px;
padding-left:10px;
padding-right:10px;
}

まとめてコンパクトに書く

p{
padding:上 右 下 左;
padding:10px 20px 30px 40px;
}
p{
padding:上 左右 下;
padding:10px 20px 30px;
}
p{
padding:上下 左右;
padding:10px 20px;
}
よかったらシェアお願いします

コメント

コメントする

INDEX
閉じる