ホームページマスターTOPページへ
初心者の為のホームページ作成支援サイト powerd by Google
HOME >CSS一覧 >ボックス

外側、内側の余白を指定する

{margin:値;}、{margin-位置:値;}でボックスの外側(周囲)の余白を指定することが出来ます。 値はpx、%などで指定します。

■ ボックスの外側の余白を指定する

ボックスの外側(周囲)の余白の指定方法は以下の通りです。(marginの方)

余白を入れたい位置 説明
margin:値;
padding:値;
値が1個の場合、上下左右 全ての余白が入ります。
margin:値1 値2;
padding:値1 値2;
値1が上下、値2が左右の余白です。
margin:値1 値2 値3;
padding:値1 値2 値3;
値1が上、値2が左右、値3が下の余白です。
margin:値1 値2 値3 値4;
padding:値1 値2 値3 値4;
値1が上、値2が右、値3が下、値4が左の余白です。
margin-top:値;
padding-top:値;
上の余白だけ入れます。
margin-right:値;
padding-right:値;
右の余白だけ入れます。
margin-bottom:値;
padding-bottom:値;
下の余白だけ入れます。
margin-left:値;
padding-left:値;
左の余白だけ入れます。

【ブラウザ表示】

天井
ボックスの上下に30pxの余白

ソース

天井
<div class="yohaku1">ボックスの上下に30pxの余白</div>

外部ファイル

div.yohaku1{
border:1px black solid;
margin:30px 0px;
}


<body>〜</body>に直接記入する場合

天井
<div style="border:1px black solid; margin:30px 0px;">
テーブルの上下に30pxの余白
</div>

■ ボックスの内側の余白を指定する

{padding:値;}、{padding-位置:値;}でボックスの内側の余白を指定するこ とが出来ます。
内側の余白の指定パターンは上の表を参照して下さい。(paddingの方)

【ブラウザ表示】

内側の余白40px

ソース

<h5 class="yohaku2">内側の余白40px</h5>

外部ファイル

h5.yohaku2{
border:1px solid;
width:200px;
padding:40px;
}


<body>〜</body>に直接記入する場合

<h5 style="border:1px solid; width:200px; padding:40px;">
内側の余白40px
</h5>

■ その他の項目

枠線の太さを指定する
枠線の種類を指定する
枠線の色を指定する
個別の枠線を一括に指定する
ボックスの横幅、高さを指定する
背景色や画像を指定する
背景画像の表示方法を指定する
背景画像の表示位置を指定する
ボックスを並べる
はみ出る部分を表示させる
ボックスの配置方法を指定する

スタイルシート一覧のページに戻る

CSS一覧
テキスト
イメージ
テーブル
ボックス
リンク
リスト
水平線
フォーム
フレーム
ページ全体

HOME

Copyright (C) 2003-2012 ホームページマスター All rights reserved.