スタイルシート(CSS)レイアウト

Home>編集方法(カスタマイズ)目次>簡易スタイルシートリファレンス目次>余白設定

余白設定

指定の方法！

CSS 指定先
margin: 10px; 上下左右/10px
margin: 10px 20px; 上下10px/左右20px
margin: 10px 20px 30px; 上10px/左右20px/下30px
margin: 10px 20px 30px 40px; 上10px/右20px/下30px/左40px

上記のように省略も可能です。また並び準は左から上→右→下→左、margin-top→margin-right→margin-bottom→margin-left、パディングも同様です。

マージン（margin）外側の余白

ボーダーより外側、ボーダーより外側、ボーダーより外側、ボーダーより外側、ボーダーより外側、ボーダーより外側

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

▲このpageの上へ|目次

パディング（padding）内側の余白

さらに<p>に上方向パディングを4方向とも10pxに設定すると、ピンク部分が設定したパディング部分です。

ボーダーより内側、ボーダーより内側、ボーダーより内側、ボーダーより内側、ボーダーより内側、ボーダーより内側

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

各種ブラウザへの対応法

必ずboxの幅を指定しましょう。1番分かりやすいのはサイドバーへの設定ですが、例えば<div id="sidebar">の設定が【200px】だったとします。

<div id="sidebar">の内側にパディングを左右【10px】とったとすると、幅は【200px】から左右のパディング分【10px】を差し引いた【180px】とします。

また<div id="sidebar">の中に<div class="sidebar">を入れてやりメニューなどを記述しますが、その際<div class="sidebar">の幅は【180px】とします。

この場合は<div id="sidebar">で既に左右【10px】分のパディングを設定しているので<div class="sidebar">は構いません。

またもし万一<div id="sidebar">に左右【1px】ずつのborderを設定していれば、幅はさらに【2px】分差し引いて【178px】とします。<div class="sidebar">も同様です

。

▲このpageの上へ|目次

Home