CSSのパディング属性の使い方-CSSチュートリアル-php.cn

CSSのパディング属性の使い方

silencement

リリース： 2019-05-27 15:47:51

オリジナル

4925 人が閲覧しました

CSSのパディング属性の使い方

css パディング属性の定義と使用法

css では、パディング属性はすべてのパディング属性 (Padding) を設定するために使用される短縮属性です。同じステートメント内で上マージンプロパティ、右マージンプロパティ、下マージンプロパティ、および左マージンプロパティを定義します。

css パディング属性構文形式

#1.padding: 属性値 1 属性値 2 属性値 3 属性値 4

2。 padding: 属性値 1 属性値 2 属性値 3

3.padding: 属性値 1 属性値 2

4.padding: 属性値 1

説明:

1. パディング属性に 4 つの属性値がある場合: 4 つの属性値はそれぞれ、上部パディング、右パディング、下部パディング、および左パディングを定義します

2。パディング属性に 3 つの属性値がある場合、属性値 1 と属性値 3 はそれぞれ上部パディングと下部パディングを定義します。属性値 2 は右パディングと左パディングを定義します

3. パディング属性に 2 つの属性値がある場合: 属性値 1 は上部パディングと下部パディングを定義します。属性値 2 は、右パディングと左パディング

4 を定義します。パディング属性に属性値が 1 つだけある場合: この属性値は、上部パディング、右パディング、下部パディング、左パディングを定義します。

#可能な属性値

auto: ブラウザーがパディングを計算します

length: パディングを特定の単位値 (ピクセル、センチメートルなど) で指定します (デフォルトは0px)

%: 親要素の幅のパーセンテージに基づいてパディングを指定します。

inherit: 親要素からパディング属性の値を継承します

例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css padding属性设置元素内边距</title>
<style type="text/css">
div{width:260px;border:1px solid #000;padding:10px 20px 30px 40px;}
</style>
</head>
<body>
<div>padding属性设置元素内边距，这是为了演示效果所添加的文本。
padding:12px 14px 16px 18px;</div>
</body>
</html>

ログイン後にコピー

実行結果