記事内に広告が含まれています。

paddingの指定の仕方-内枠からの距離を指定するスタイルシート

HTMLとスタイルシート ウェブサイト・ブログ作成
HTMLとスタイルシート
ウェブサイト・ブログ作成
この記事は約2分で読めます。

 paddingはスタイルシート(CSS)の指定のひとつ。

 内枠からの距離を指定するスタイルシートだ。

 よく使うスタイルシートなので覚えておくとよいと思う。

 参考に、paddingの指定の記述と実際の表示を乗せてみた。

 いや、この間、FC2ブログのスタイルシートでpaddingの指定がしてあるのに気がつかず、『何で、ここまでしか、文字が入らないんだろう?』と散々悩んだの・・・。

 その後も上下左右の指定を間違えて記憶したりしてて。

 ちょっと苦労したのでした。

広告

paddingによるスタイルシート(CSS)の指定

1)padding: 1px;

 [上下左右]の内枠からの距離を指定を1pxで指定

2)padding: 1px 10px;

 [上下] と [左右]の内枠からの距離を指定

3)padding: 1px 10px 6px;

 [上] と [左右] と [下] の内枠からの距離を指定

4)padding: 1px 4px 6px 10px;

 [上] と [右] と [下] と [左]の内枠からの距離 を指定

*PXでの指定だけでなく、他の単位の指定もできる。
*単位を省略することもできる。

paddingでスタイルシート(CSS)を指定した例

1)padding: 1px;のスタイルシート指定の表示例

padding: 1px;の表示例

2)padding: 1px 10px;のスタイルシートの表示例

padding: 1px 10px;の表示例

3)padding: 1px 10px 6px;のスタイルシートの表示例

padding: 1px 10px 6px;の表示例

4)padding: 10px 4px 6px 10px;のスタイルシート指定の例

padding: 10px 4px 6px 10px;の表示例

 

コメント

タイトルとURLをコピーしました