ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSのパディングについて詳しく解説
CSSのパディングについて詳しく解説
- 迷茫オリジナル
- 2017-03-25 15:34:492298ブラウズ
構文:
padding: [
適用対象: table-を除くすべての要素
アニメーション: はい
: それぞれの独立性を参照属性関連属性
: [padding-top ] || [padding-bottom ] || [padding-left ]Value:
説明:
- オブジェクトの 4 辺の内部マージンを取得または設定します。
4 つのパラメータ値をすべて指定すると、上、右、下、左の順に 4 つの辺に適用されます。
1枚のみご用意の場合は4面全てに使用します。
2つある場合、1つ目は上下用、2つ目は左右用となります。
3つある場合、1つ目は上用、2つ目は左右用、3つ目は下用となります。
非置換インライン要素は、この属性を使用して左側と右側にインライン パッチを設定できます。上側と下側にインライン パッチを設定したい場合は、まずオブジェクトをブロック レベルとして表示する必要があります。またはインラインブロッククラス。
-
の対応するスクリプト機能は
padding です。 - TRBL
,border
パディング : 20px; == パディング : 20px 20px 20px 20px;
パディング:20px 10px; == パディング:20px 10px 20px 10px;
パディング: 20px 10px 30px == パディング: 20px 10px 30px 10px;
反対側の辺が等しい場合、4 つの辺が等しい場合、後者は省略され、1 つだけ<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>padding 填充</title>
<style type="text/css">
p,span{
border: 1px dashed red;
}
.sample0{
padding: 20px;
}
.sample1{
padding: 40px 30px 20px 10px;
}
.sample2{
padding: 20px 10px 20px;
}
.parent{
padding:20px;
}
.child{
border: 1px solid blue;
}
</style></head><body>
<p class="sample0">sample</p><br>
<p class="sample1">sample</p>
<br>
<p class="sample2">sample</p>
<br>
<p class="parent">
<p class="child">child </p>
</p></body></html>
以上がCSSのパディングについて詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。