MB-Support

パソコン初心者のサポートページ

スタイルシートでボックスの内側の間隔を指定する方法 padding

 Internet Explorer 5.x と、それ以降の Internet Explorer では、ボックス全体の幅に padding を含めるか含めないかの違いがあります。


ボックスの内側の間隔を padding(パディング)と呼び、top(上)、right(右)、bottom(下)、left(左)と個別に間隔を指定できます。 以下のサンプルでは、ブロックレベルの <div> 〜 </div> でボックスを作り、赤い部分が padding となります。

ボックスと内容領域とは異なり、p 要素などがボックスとなり、その要素内に記入した文字や画像が内容領域となります。

レンダリングエンジンによる padding 自体の解釈は同じですが、Internet Explorer 5.x と、それ以降の Internet Explorer では、ボックス全体の幅に padding を含めるか含めないかの違いがあります。

Internet Explorer 5.x では、padding を省いた内容領域の幅をボックス幅とします。つまり、要素である <div> のボックスで、width="500" 幅 500px として、padding 20px とした場合、<div> で作られるボックス幅は、500px + padding-left ( 20px ) + padding-right ( 20px ) = 540 px となります。

Internet Explorer 6 以降では、ボックス幅に padding の幅が含まれます。これにより、要素である <div> のボックスで、width="500" 幅 500px として、padding 20px とした場合でも、<div> で作られるボックス幅は、500px となります。

要素で指定する横幅が確実に適用される後者の方が、デザインする上で的確に作業を進められます。 制作する立場から考えると、閲覧するユーザーが Internet Explorer 6 以降、または、正しく CSS を解釈するブラウザに乗り換えてもらう事を願うでしょう。 互換性を考えた場合、絶対的に width を指定するボックスを使う場合は padding を 0px にした方が無難と思われます。

padding : 0px ; を指定すると、要素内様とボックスの上、右、下、左の間隔が全て 0px で統一されます。 これを個別に指定する方法は以下です。順番は、上、右、下、左。

<style type="text/css">
<!--
body  {
         padding-top:0px;
         padding-right:0px;
         padding-bottom:0px;
         padding-left:0px;
} 
-->
</style>

このスタイルは padding : 0px ; と同じですが、上下左右の padding を個別に指定したい時に利用します。 また、個別に指定する場合でも、一行にまとめる事もできます。

<style type="text/css">
<!--
body  {
         padding:0px 0px 0px 0px;
} 
-->
</style>

順番は 上、右、下、左の順に数字を指定して、半角スペースを入れます。以下はクラスで指定する場合の例。


HTMLソース(メモ帳)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>題名</title>
<style type="text/css">
<!--
.box  {
         padding:50px 100px 50px 100px;
} 
-->
</style>
</head>
<body>
 <div class="box">
  <p>ボックス</p>
 </div>
</body>
</html>

要素に直接指定する場合の例。


HTMLソース(メモ帳)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>題名</title>
</head>
<body>
 <div style="padding:50px 100px 50px 100px;">
  <p>ボックス</p>
 </div>
</body>
</html>



戻る 一覧表示 次へ


BTOパソコン・ゲームPC・自作パソコンなら【TSUKUMO】 - 自作PCに必要なパーツ、豊富な品揃え

Copyright © 2013 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項