サイト内検索
...スタイルシート(css)...
スタイルシート・ボックス
内側の余白
- 内側の余白は、paddingプロパティを指定します。
- [使い方]
- .sample{padding:50px;}
- .sample{padding-top:10px;}
「paddingとmarginの違い」は、こちらです。
プロパティ名 | 値 | 説明 |
---|---|---|
padding: | ; |
「数値+単位」(例・・100px)を指定します。
単位は、「px」・「em」など、または「%」を指定します。 auto(自動) |
プロパティ名 | 値
(サンプル) |
説明 |
---|---|---|
padding: | 10px; | 上下左右 の指定をします。 |
padding: | 10px 20px; | 上下・左右 の指定をします。 |
padding: | 10px 20px 30px; | 上・左右・下 の指定をします。 |
padding: | 10px 20px 30px 40px; | 上・右 ・下・左 の指定をします。 |
プロパティ名 | 値
(サンプル) |
説明 |
---|---|---|
padding-top: | 10px; | 上の余白の指定をします。 |
padding-right: | 20px; | 右の余白の指定をします。 |
padding-bottom: | 30px; | 下の余白の指定をします。 |
padding-left: | 40px; | 左の余白の指定をします。 |
サンプル
[headの中]
<style type="text/css"><!--
.sam{
width: 350px;
background-color: #ccff99;
}
.sample1{
padding: 30px;
}
.sample2{
padding-top: 10px;
padding-bottom: 10px;
}
-->
</style>
[bodyの中]
<div class="sample1">padding:50px;</div><div class="sample2">padding-top:10px;padding-bottom:10px;</div>
[ブラウザ上]
padding: 50px;
padding-top: 10px; padding-bottom: 10px;