スポンサーリンク
スポンサーリンク

外側の余白を設定するときに使うmarginプロパティ

CSS

以前paddingプロパティを紹介しました。
あれはborderの内側の余白を設定するものでした。

今回紹介するのはborderより外側に余白を設ける
marginプロパティです。ボックスより外側になるので
コンテンツ領域に指定した背景は反映されることは
ありません。

marginに関わるプロパティ
margin-top 上の外側の余白を設定
margin-bottom 下の外側の余白を設定
margin-left 左の外側の余白を設定
margin-right 右の外側の余白を設定
margin 上記の4件をまとめて設定できます。
    「上px 右px 下px 左px」と指定します。

設定値
auto 自動
数値 pxを付けて指定する。
% 割合を設定できますけど、どうやって使う??

marginには負の値を設定できます。

コンテンツボックス内側の余白を設定するpaddingとは違い、
外側の余白を設定するmarginには負の値を設定できます。
例えば、margin-topに「-50px」を指定すると元の場所より
50px上に物が配置されます。

あれmarginが効かない?ってなってしまったら

margin:**pxを適用している親要素にoverflow:hidden;を
サンプルコードのように指定します。

コンテンツの幅を指定して中央揃えにする。

test.cssの4行目で入れ物の幅を指定し、14行目のように
書くことで中央揃えに指定できます。
これはもうお決まりのものだと思ってください。

コメント

タイトルとURLをコピーしました