ボックスの余白を指定；padding

【padding】の外部CSS指定方法

【padding】の書式

padding: 値; /*上下左右の余白を指定。*/

padding: 値 値; /*上下、左右の余白を指定。*/

padding: 値 値 値; /*上、左右、下の余白を指定。*/

padding: 値 値 値 値; /*上、右、下、左の余白を指定。*/

• paddingの値は、数値または、キーワードで指定する。
  ※キーワードは、auto（ブラウザが自動調整）のみです。
  • 相対的単位；px　%　em　ex
  • 絶対的単位；pt　mm　cm　in　pc
• 複数の値を指定する場合は、値間に半角スペースを記述する。
• マイナス値は、指定できない。
• パーセント値は、親要素の横幅を100%として、上下左右のサイズを指定する。

※実際の表示や見え方は、ブラウザや使用環境に依存します。
また、SEO対策に不要と思われる値やキーワードは、独断で掲載していませんので予めご了承下さい。

【padding】の使用例

※「セレクタ名」と「値」は、お好みで指定して下さい。

paddingの値を上下左右10pxに指定。

▼ 表示
 

 
▼ CSS

.sample01 {
    margin: 10px;
    border : solid #FF00FF 2px;
    padding: 10px;
}

 
▼ HTML

 <p class="sample01">SEO対策に必要な、HTML,CSSのタグ辞典です。コピペしてお使い下さい。</p>

paddingの値を上下10px、左右20pxに指定。

▼ 表示
 

 
▼ CSS

.sample02 {
    margin: 10px;
    border : solid #FF00FF 2px;
    padding: 10px 20px;
}

 
▼ HTML

 <p class="sample02">SEO対策に必要な、HTML,CSSのタグ辞典です。コピペしてお使い下さい。</p>

paddingの値を上10px、右20px、下30px、左40pxに指定。

▼ 表示
 

 
▼ CSS

.sample03 {
    margin: 10px;
    border : solid #FF00FF 2px;
    padding: 10px 20px 30px 40px;
}

 
▼ HTML

 <p class="sample03">SEO対策に必要な、HTML,CSSのタグ辞典です。コピペしてお使い下さい。</p>

paddingの値を上下3%、左右5%に指定。

▼ 表示
 

 
▼ CSS

.sample04 {
    margin: 10px;
    border : solid #FF00FF 2px;
    padding: 3% 5%;
}

 
▼ HTML

 <p class="sample04">SEO対策に必要な、HTML,CSSのタグ辞典です。コピペしてお使い下さい。</p>