Style paddingLeft 属性

定義と使用方法

paddingLeft 属性を設定または返し、要素の左内余白を指定します。

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

も参照してください：

CSS チュートリアル：CSS 内側マージン

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

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

インスタンス

例1

<div>要素の左内余白を設定します：

document.getElementById("myDiv").style.paddingLeft = "50px";

自分で試してみる

例2

<div>要素の左内余白を"normal"に戻します：

document.getElementById("myDiv").style.paddingLeft = "0px";

自分で試してみる

例3

返り値：<div>要素の左内余白：

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

自分で試してみる

例4

marginLeftとpaddingLeftの違い：

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

自分で試してみる

構文

paddingLeft属性の返り値：

object.style.paddingLeft

paddingLeft属性の設定：

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

属性値

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

技術的詳細

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

ブラウザのサポート

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