スタイルシート(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; }

Home | 編集方法TOP | 簡易スタイルシートリファレンス目次 | Page Top

パディング（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">も同様です。

Home | 編集方法TOP | 簡易スタイルシートリファレンス目次 | Page Top

無料サーバー
お薦めサーバー
ネットショップ
CMSブログソフトウェア

Copyright © スタイルシート(CSS)レイアウト. All Rights Reserved.

サイトマップ