CSSパディング - 要素の右パディングの設定 | padding-right

2008/07/20 00:15Update
TAGS: CSSパディング | padding-right | 余白

padding-rightはCSSパディングに関連する属性で、要素枠線の内側の右余白を指定します。 本文はpadding-rightについて学びたいと思います。

padding-right属性


padding-rightは、右パディング（要素枠線の外側の右余白）を指定する属性です。

<<図１>>


■　padding-right属性のブラウザーの対応状況
◇　N、Firefox、IE、Opera

■　padding-right属性の値
◇　padding-right: 5px;
※大きさは、数字＋長さの単位 で指定します。

padding-right属性の使用例



<html>
<head>
<title>CSSパディング</title>

<style type="text/css">
<!--
.padding1 {padding-right: 20px;}
.padding2 {padding-right: 50px;}

#container1,
#container2 {
border:solid 1px;
width:150px;
}

#div1 {background-color: #45b1e6;}
#div2 {background-color: #f5b1e6;}

#div3 {background-color: #45b1e6;}
#div4 {background-color: #f5b1e6;}

-->
</style>

</head>
<body>

<div id="container1">
<div id="div1" class="padding1">
  <div id="div2" class="padding2">ボックス２   右パディング: 50px;</div>
</div>
</div>

<div id="container2">
<div id="div3" class="padding1">ボックス３   右パディング: 20px;</div>
<div id="div4" class="padding2">ボックス４   右パディング: 50px;</div>
</div>

</body>
</html>

⇒ 別ウィンドウで確認

▼ブラウザーでの表示は次のようになります
ボックス２ 右パディング: 50px;
ボックス３ 右パディング: 20px;
ボックス４ 右パディング: 50px;

有关作者
Syboos.jp編集長AJavaやオープンソース情報の執筆、Webサイトの開発や運営全般の業務に携わる。

Sponsored Link


Comments

用户名 (required)

Email (will not be published) (required)

URL

Evaluation

  • Relative Articles