TOP ＞ マージン・パディング・ボーダー ＞ スタイルシートでパディングを設定する
スタイルシートでパディングを設定する
ボックスモデルの三要素の一つパディングをスタイルシートを使って設定してみましょう。パディングって何？って人は、 ” ボックスモデルとは何だろう？”を確認してください。マージンが段落間のスペース幅を設定しているのに対し、 パディングはボーダーから内容までのスペース幅を設定します。
マージン同様、パディングも上下左右を指定することが出来ます。値は”px”や”pt”のような数値やパーセントを使います。
ただ、マージンとは異なり、マイナスの値は指定できません。
スタイルシートでパディングを設定する。
【書き方】
padding-top:上パディングの値; padding-bottom:下パディングの値;
padding-left:左パディングの値; padding-right:右パディングの値;
"スタイルシートでパディングを設定する。"のサンプルはコチラをクリック
- サンプルページのコードは以下の通りです。
|
【スタイルシート】 body{margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; background-image: url(http://www.1css.net/img/box2.gif); } .c1{ margin: 30px; padding-top: 5px; padding-bottom: 5px; padding-left: 20px; padding-right: 30px; background-color: #dddddd; } .c2{ margin-top: 10px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; padding-top: 10px; padding-bottom: 10px; padding-left: 5px; padding-right: 5px; background-color: #ffdddd; } 【HTML本文】 <html> <head> <title>スタイルシートでマージンを設定する。のサンプル</title> <meta http-equiv="content-type" content="text/html"> <meta http-equiv="content-style-type" content="text/css"> <link rel="stylesheet" href="http://www.1css.net/sample/403.css" type="text/css"> </head> <body> <p><font color="red">body要素のマージンを上下左右すべて0pxとしていますので、このように、ページの端々にテキストがぴったり引っ付いてしまいます。</font></p> <p class="c1">この段落では、上下左右にマージンをそれぞれ30px取っています。<br />また、上下に5px、左に20px、右に30pxのパディングを設定しています。</p> <p class="c2">この段落では、上下に10px左右に0pxのマージンを取っています。<br />また、上下に10px、左右に5pxのパディングを設定しています。</p> </body> </html> |
[
マージン・パディング・ボーダー ]
