padding-top, -bottom, -left, -rightの使い方
Web標準HTML/CSS > padding-***の使い方
padding-top, -bottom, -left, -right
プロパティの説明
padding-***は、上下左右に要素内の余白を指定するプロパティです。要素内にあるため、背景も適用されます。padding-top:上の余白、padding-bottom:下の余白、padding-left:左の余白、padding-right:右の余白となっています。全ての要素に指定することができます。
指定できる値
- CSSで使える数値
- 20px, 2emなどを指定。
サンプル
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>サンプルページ</title> <style type="text/css"> <!-- .p1{padding-top:40px; background-color:#cccccc;} --> </style> </head> <body> <h1>サンプルページ</h1> <p class="p1">上に40pxの余白をあけています。</p> </body> </html>