h1（白色）とheader（黒色）があり
headerのなかにh1があるとする
（子供にh1がいる）
headerになにもついていない：
h1に上向きのマージンを付けたとする
headerの領域は変わらず
h1に外側余白（白い）ができる
じゃあこの白いのを塗りたいとする
headerにボーダーやマージンなどをつけると
背景があるんだったら：
親に対して一番最初のこどもは上向きのマージンをつけない
親に対して一番最後のこどもは下向きのマージンをつけない
こういう前提がある
さて、トップに戻るはどう機能するか
トップに戻るが一番上まで戻らないのはこういう部分があるらしい
背景が塗られないとかいうのも同じ問題らしい
ざっくりいうとそういう事情なんで気を付けよう的な。
リセットcssが大事なのはそういう理由がある
margin,paddingが思わぬ形でついていると思わぬ動作が出る
webらしい構造で作りたいなら
リセットcssじゃなくてノーマライズでよろしい
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>スムーススクロール</title>
<link rel="stylesheet" href="smooth.css">
</head>
<body>
<header id="top">
<h1>スムーススクロール</h1>
</header>
<div>
<a class="green" href="#top">トップへ戻る</a>
</div>
</body>
</html>
css
@charset "utf-8";
header{
height: 200vh;
background-color:#333;
padding-top: 0.67em;
}
.green{
background-color:#3f3;
border:1px solid #3f3;
border-radius: 1rem;
}
h1{
margin-top:1rem;
background-color:#fff;
}
外側の余白はアンカーポイントにのらないのだ
ボックスモデルの考え方ではマージンは外側余白になるので要素自身と考えられない
だからh1のマージン付きにアンカーをつけると
h1のマージンなしの部分にだけまで戻る
上下のマージンは相殺されるとか
なにかとマージンは癖があるらしい
子要素にmargin-top
親要素のpaddingをとる
→
ぴったり
