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

CSS

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

そもそも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;
}

Leave a Reply

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

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください