css - 1px のパディングを追加すると、外側の div に子のマージンが含まれます

Question

div の子にマージンが含まれている場合、それらのマージンは の計算に含まれませんdiv.offsetHeight。ただし、1px のパディングを与えるなど、親 div に対して特定のことを行う場合は除きます。

以下のコードは、報告された div の高さを 38px から 83px (子マージンを含む「正しい」サイズ) にジャンプさせます。要素に境界線を追加すると、同じ効果があります。

ここで何が起こっているのですか？これは定義された動作ですか? また、この 1px のハックなしで要素の実際の高さ (子マージンを含むが、それ自体のマージンは含まない) を取得する方法はありますか?

(この質問のコンテキストは、ウィンドウのサイズ変更時に iframe のサイズを変更していたということです。計算は、1px のパディングが含まれている場合にのみ正しく機能しました。)

var hasPadding = false;

var alertDivHeightButton = document.getElementById('2');
alertDivHeightButton.onclick = alertDivHeight;
var togglePaddingButton = document.getElementById('3');
togglePaddingButton.onclick = togglePadding;

function alertDivHeight () {
    var div = document.getElementById('1');
    alert("width of div: " + div.offsetHeight);
}

function togglePadding () {
    var div = document.getElementById('1');
    if (hasPadding) {
        div.style.padding = '0px';
        togglePaddingButton.value = "Add 1px padding";
    } else {
        div.style.padding = '1px';
        togglePaddingButton.value = "Remove 1px padding";
    }
    hasPadding = !hasPadding;
}

<div id="1">
    <h1>Hello, world</h1>
</div>

<input type="button" id="2" value="Alert div height">
<input type="button" id="3" value="Add 1px padding">

JSFiddle