Style padding プロパティ

定義と使用法

padding 属性は要素のインsetsパディングを設定または返します。

この属性は1から4つの値を取ることができます：

margin属性 および padding属性 要素の周りにスペースを挿入します。ただし、marginは枠線の周りにスペースを挿入し、paddingは要素の枠線内にスペースを挿入します。

  • 1つの値、例えば：div {padding: 50px} - すべての4つの辺に50pxのインsetsパディングがあります
  • 2つの値、例えば：div {padding: 50px 10px} - 上下のインsetsパディングは50px、左右のインsetsパディングは10pxになります
  • 3つの値、例えば：div {padding: 50px 10px 20px} - 上側の内側マージンは50px、左右の内側マージンは10px、下側の内側マージンは20px
  • 4つの値、例えば：div {padding: 50px 10px 20px 30px} - 上側の内側マージンは50px、右側の内側マージンは10px、下側の内側マージンは20px、左側の内側マージンは30px

も参照してください：

CSSチュートリアル：CSS 内パディング

CSSリファレンスマニュアル：padding属性

例

例1

以下に<div>要素の内側マージンを設定します：

document.getElementById("myDiv").style.padding = "50px 10px 20px 30px";

自分で試してみてください

例2

<div>要素のすべての4つの側の内側マージンを"25px"に変更します：

document.getElementById("myDiv").style.padding = "25px";

自分で試してみてください

例3

以下に<div>要素の内側マージンを返します：

alert(document.getElementById("myDiv").style.padding);

自分で試してみてください

例4

margin属性とpadding属性の違い：

function changeMargin() {
  document.getElementById("myDiv").style.margin = "100px";
}
function changePadding() {
  document.getElementById("myDiv2").style.padding = "100px";
}

自分で試してみてください

文法

padding属性を返す：

object.style.padding

padding属性を設定する：

object.style.padding = "%|length|initial|inherit"

属性値

値 説明
% 親要素の幅のパーセントで内側マージンを定義します。
length 長さ単位で内側マージンを定義します。
initial この属性をデフォルト値に設定します。参照してください initial。
inherit この属性を親要素から継承します。参照してください inherit。

技術的詳細

デフォルト値： 0
返り値： 文字列で、要素の内側マージンを表します。
CSSバージョン： CSS1

ブラウザがサポートしています

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート