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

【padding】の外部CSS指定方法

【padding】の書式

padding: 値; /*上下左右の余白を指定。*/
padding: 値 値; /*上下、左右の余白を指定。*/
padding: 値 値 値; /*上、左右、下の余白を指定。*/
padding: 値 値 値 値; /*上、右、下、左の余白を指定。*/
  • paddingの値は、数値または、キーワードで指定する。
    ※キーワードは、auto(ブラウザが自動調整)のみです。

    • 相対的単位;px % em ex
    • 絶対的単位;pt mm cm in pc
  • 複数の値を指定する場合は、値間に半角スペースを記述する。
  • マイナス値は、指定できない。
  • パーセント値は、親要素の横幅を100%として、上下左右のサイズを指定する。

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

【padding】の使用例

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

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

▼ 表示

SEO対策に必要な、HTML,CSSのタグ辞典です。コピペしてお使い下さい。

 
▼ CSS

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

 
▼ HTML

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

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

▼ 表示

SEO対策に必要な、HTML,CSSのタグ辞典です。コピペしてお使い下さい。

 
▼ CSS

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

 
▼ HTML

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

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

▼ 表示

SEO対策に必要な、HTML,CSSのタグ辞典です。コピペしてお使い下さい。

 
▼ CSS

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

 
▼ HTML

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

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

▼ 表示

SEO対策に必要な、HTML,CSSのタグ辞典です。コピペしてお使い下さい。

 
▼ CSS

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

 
▼ HTML

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

スポンサードリンク

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です