menu
menu

キーワード検索

 

12月更新・前月(11月)の人気記事トップ10 - 12/02/2019

  1. ( 1 - ) 【Mac】Macのユーザー名とアカウント名を変更する
  2. ( 5 ↑) 【Mac】Finderにフォルダのフルパスを表示させる方法
  3. ( 2 ↓) 【iPhone・iPad】iPhoneのメモリを簡単に解放する方法
  4. ( 3 ↓) 【CSS】CSSだけでドロップダウンメニュー
  5. (圏外↑) 【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直してください。
  6. ( 4 ↓) 【Mac】外付けメディアが取り外せなくなったらSpotlightの除外項目を設定してみる
  7. (圏外↑) 【Google】Googleアカウントのメールアドレスを変更する方法
  8. (圏外↑) 【Mac】MacにGoogle Driveをインストール
  9. (圏外↑) 【Suica】iPhoneでSuicaをクレジットカード無しで使う方法
  10. ( 7 ↓) 【jQuery】入門2. jQueryをHTMLに組み込む
このエントリーをはてなブックマークに追加

padding【CSSリファレンス】

padding【CSSリファレンス】

こんにちは(・∀・)

CSSプロパティのご紹介です。今回ご紹介するCSSプロパティはpaddingです。

概要

paddingプロパティを使用して要素の枠線と文字列(内容)の間隔を指定します。四辺まとめて指定する方法と、個別に指定する方法があります。


.sample {
  padding: 10px;
}
適用要素

すべての要素
tr要素・thead要素・tbody要素・tfoot要素col要素・colgroup要素を除く

指定できる値
実数値+単位
paddingを実数値+単位で設定
%値
paddingを親要素の幅に対する割合で設定
auto
自動設定。
初期値

auto

指定方法
padding:10px;
上下左右
padding:10px 20px;
上下 左右
padding:10px 20px 10px;
上 左右 下
padding:10px 20px 10px 20px;
上 右 下 左

0の場合単位はなくても可。autoの指定もできます。

個別に指定
padding-top:
padding-right:
padding-bottom:
padding-left:
1. サンプル

要素にpaddingを指定します。

HTML

<p class="demo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget tellus porttitor odio vulputate bibendum vel non nulla. Fusce non elementum nunc, in elementum dolor. Ut ante nulla, porta in felis nec, egestas tempor metus. Mauris posuere leo elit, nec rhoncus nibh fermentum id. Nam commodo rhoncus posuere. Nunc vel imperdiet eros. Vivamus laoreet leo eros, eget scelerisque quam sodales venenatis. Integer magna libero, semper ac ultricies id, interdum vel orci. Aenean euismod sapien eget maximus sagittis.
</p>
CSS

.demo {
  padding: 10px;
}
Result

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget tellus porttitor odio vulputate bibendum vel non nulla. Fusce non elementum nunc, in elementum dolor. Ut ante nulla, porta in felis nec, egestas tempor metus. Mauris posuere leo elit, nec rhoncus nibh fermentum id. Nam commodo rhoncus posuere. Nunc vel imperdiet eros. Vivamus laoreet leo eros, eget scelerisque quam sodales venenatis. Integer magna libero, semper ac ultricies id, interdum vel orci. Aenean euismod sapien eget maximus sagittis.

要素にpadding:10pxの指定がしてあるのでコンテンツが要素の内側から10px離れて表示されます。


2. サンプル

テーブルのセルにpaddingを指定します。

HTML

<div class="demo2">
<table>
<tr>
<td>サンプルデモ</td>
<td>サンプルデモ</td>
</tr>
</table>
</div>
CSS

.demo2 table td {
  padding: 10px;
}
Result
サンプルデモ サンプルデモ

テーブルのセルにpadding:10pxの指定がしてあるのでコンテンツがセルの内側から10px離れて表示されます。

  • CSS
このエントリーをはてなブックマークに追加