border-topを指定すると背景画像は左上から並ぶ

CSSのコードは、

html {
  margin: 0;
  padding: 0;
  color: #000000;
  background-color: #ffffff;
}

body {
  margin: 0;
  padding: 0;
  border-top: 1px solid transparent;
  background-image: url("data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%03%00%00%00%03%08%02%00%00%00%D9J%22%E8%00%00%00%1BIDATx%9C%25%C5!%01%00%00%00%02%20%3F%F9%7F%1B%06)%04h%9B%87%3C%0C(%04%13%BA%AD%DE%22M%00%00%00%00IEND%AEB%60%82");
}

なので、border-topによりmarginの相殺は起こらず背景画像は左上から並ぶが、描画エリアいっぱいにはならない。

htmlからスタイル指定を取り除くとちゃんと並べられる。