css余白(paddingとmargin)pc操作中

概要

外側に余白を作るのが”margin” 内側に余白を作るのが”padding”、それぞれ数値を指定します

インライン要素は左右だけ margin、padding を指定できる。

spanなどのインライン要素にはdisplay:inline-block;を追加する。
画像IMGタグにも使用できます

margin

外側に余白を作る margin: px;

上下左右のマージン(余白)をまとめて指定 値を1つ指定: [上下左右]の余白になります。
値を2つ指定: 記述した順に[上下][左右]の余白になります。
値を3つ指定: 記述した順に[上][左右][下]の余白になります。
値を4つ指定:記述した順に[上][右][下][左]の余白になります。
{margin: 0 auto;}

block要素を水平中央にする。上下にはきかない。幅(width)を指定必須

(左右のmarginの値をautoすることで、右側と左側のmarginが等しくなり
結果として要素が中央寄せになります。上下のmarginは0)

外部リンク参考サイトさん margin:autoについて
上下左右のマージン(余白)を個別に指定

 top:数値など; right:数値など; bottom:数値など; left:数値など;でそれぞれ指定する

margin-top: px、またはパーセント等; 上の余白を指定
margin-right: px、またはパーセント等; 右の余白を指定
margin-bottom: px、またはパーセント等; 下の余白を指定
margin-left: px、またはパーセント等; 左の余白を指定
ネガティブマージン(マイナスマージン)  marginの数値をマイナス指定すること。ネガティブマージンは余白を空けず、間を詰めること

margin: -px

外部リンク参考サイトさん margin設定について

padding

内側に余白を作るのが padding: px。
値を1つ指定した場合、指定した値が上下左右の余白になります。

内側の余白をつくる。基本的な設定はmarginと同じ

上下左右を異なる余白にしたい場合には、スペースで区切って複数の値を指定します。

{ padding: 数値px 数値px 数値px 数値px; }

上下左右のパッディング(余白)を個別に指定

 top: right: bottom: left:でそれぞれ指定する

padding-top: px、またはパーセント等 上の余白を指定
padding-right: px、またはパーセント等 右の余白を指定
padding-bottom: px、またはパーセント等 下の余白を指定
padding-left: px、またはパーセント等 左の余白を指定

文章の1行目の空白。 {text-indent:px;}をつかう。単位はpxまたはem

外部リンク参考サイトさん padding設定

楽しくpc