最新のWeb開発のチュートリアル
 

Style padding Property

<スタイルオブジェクト

例

パディングを設定<div>要素を：

document.getElementById("myDiv").style.padding = "50px 10px 20px 30px";
»それを自分で試してみてください

定義と使用法

パディングプロパティセットまたは要素のパディングを返します。

このプロパティは、1から4つの値をとることができます。

マージンプロパティと要素の周りのパディングプロパティの挿入スペースの両方。 しかし、その差は詰め物が要素の境界内のスペースを挿入しながら、マージンが、境界線の周りにスペースを挿入することです。

  • 一つの値、等：DIV {パディング：は50px} - すべての4つの辺がは50pxのパディングを有するであろう
  • 二つの値は、のように：DIV {パディング：10pxのは50px} - 上部と下部パディングは50pxになり、左右パディングは10pxのであろう
  • DIV：のような3つの値{パディング：は50px 10pxの20ピクセル} - トップパディングは50px、左右パディングが10pxのであろうとなり、下パディングがあろう20ピクセル
  • DIV：のような四つの値、{パディング：は50px 10pxの20ピクセル30px} - トップパディングは50pxになり、右パディングが10pxのになり、下パディングが20ピクセルになり、左詰め物がされる30px

ブラウザのサポート

Internet ExplorerFirefoxOperaGoogle ChromeSafari

パディングプロパティは、すべての主要なブラウザでサポートされています。

構文

パディングプロパティを返します：

object .style.padding

パディングプロパティを設定します。

object .style.padding=" プロパティ値
値 説明
% 親要素の幅の％でパディングを定義します
length 長さの単位でパディングを定義します
initial このプロパティがデフォルト値に設定します。 最初の記事を読みます
inherit その親要素からこのプロパティを継承します。 継承についての記事を読みます

技術的な詳細

デフォルト値： 0
戻り値： 要素のパディングを表す文字列、
CSSのバージョン CSS1

その他の例

例

すべての四辺のパディング変更<div>の要素を"25px" ：

document.getElementById("myDiv").style.padding = "25px";
»それを自分で試してみてください

例

パディング戻る<div>要素を：

alert(document.getElementById("myDiv").style.padding);
»それを自分で試してみてください

例

マージンプロパティやパディングプロパティの違い：

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

function changePadding() {
    document.getElementById("myDiv2").style.padding = "100px";
}
»それを自分で試してみてください

関連ページ

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

CSSリファレンス： padding property

<スタイルオブジェクト