ホームページ > 記事 > ウェブフロントエンド > CSSでパディングを設定する方法
CSSでパディングを設定する方法
- 醉折花枝作酒筹オリジナル
- 2021-04-21 17:27:515991ブラウズ
CSSではpadding属性を使用してパディングを設定することができ、要素に「padding:数値単位 | パーセント値」を設定するだけです。 padding プロパティは、要素上のすべてのパディングの幅を設定するか、各側のパディングの幅を設定します。パディング属性では、負のパディング値を指定することはできません。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
パディング (パディング) の設定方法を見てみましょう:
私たちのパディングは CSS ボックス モデルの 1 つです。それでは、パディングを見てみましょう。どのように設定されているのでしょうか。
padding: 宣言内のすべてのパディング属性を設定できる短縮属性です。
padding 属性を単独で使用して、上下左右のパディングを変更します。
可能な値:
length: 固定パディングを定義します (ピクセル、pt、em など)
%: パーセンテージ値を使用してパディングを定義します
使用法:
#padding-left は、オブジェクトの左側からのパディング間隔を設定します。div{padding-left:5px}オブジェクト内の左側からのパディング間隔は 5pxdiv{padding-right:5px}オブジェクトの右側のパディング間隔は 5px です
div{padding-top:5px}オブジェクト内の上部パディングと上部パディング距離の間の距離は 5px# です。
##padding-bottom は、オブジェクトと下部パディングの間の距離を設定します
div{padding-bottom:5px}オブジェクトと下部パディング間隔の間の内部距離は 5px
説明オブジェクトの 4 辺のパッチ マージンを取得または設定します。
4 つのパラメータ値をすべて指定すると、4 つの辺が右上-下-左の順序で適用されます。
1 つだけ指定した場合は、4 つのエッジすべてに使用されます。
2 つある場合、1 つ目は上下に使用され、2 つ目は左右に使用されます。
3 つ指定した場合、1 つ目は上、2 つ目は左右、3 つ目は下になります。
インライン オブジェクトでこの属性を使用するには、まずオブジェクトの高さ属性または幅属性を設定するか、位置属性を絶対に設定する必要があります。
Padding の値を負にすることはできません。
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.css{
width:350px;
height:80px;
border:1px solid #00F;
padding-left:40px;
padding-right:40px;
padding-top:40px;
padding-bottom:40px;
/* 可以合起来写成padding:40px; */
}
</style>
</head>
<body>
<div class="css">padding用法</div>
</body>
</html>レンダリング:
推奨学習:
以上がCSSでパディングを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。