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、パディングも同様です。
ボーダーより外側、ボーダーより外側、ボーダーより外側、ボーダーより外側、ボーダーより外側、ボーダーより外側
p{
margin-top: 10px;
margin-right: 15px;
margin-bottom: 10px;
margin-left: 15px;
}
----------------------------------
p{ margin: 10px 15px 10px 15px; }
----------------------------------
p{ margin: 10px 15px; }
Home | 編集方法TOP | 簡易スタイルシートリファレンス目次 | Page Top
さらに<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">も同様です。
Home | 編集方法TOP | 簡易スタイルシートリファレンス目次 | Page Top
Copyright © スタイルシート(CSS)レイアウト. All Rights Reserved.