背景
各セクションに移動した際、追従ヘッダに遷移先の要素が隠れてしまう際にscroll-margin-topを使って解消するかと思います。
input要素にscroll-margin-topを指定しても、隠れてしまうままで詰まっていた為です。
input要素にscroll-margin-topを指定できない理由
scroll-margin-topはスクロールされる要素に指定できる為です。
スクロールされる要素というのは、 block レベル要素です。
block レベル要素
見出し・段落・表など、文書を構成する基本となる要素で、一つのかたまり(ブロック)に意味や役割を与える要素
block レベル要素の例は以下です。
<address>、 <blockquote>、 <div>、 <dl>、 <fieldset>、 <form>、 <h1>、 <h2>、 <h3>、 <h4>、 <h5>、 <h6>、 <hr>、 <noscript>、 <ol>、 <p>、 <pre>、 <table>、 <ul>
inline レベル要素
主にブロックレベル要素の内容の一部となる要素
inline レベル要素の例は以下です。
<a>、 <abbr>、 <b>、 <big>、 <br>、 <cite>、 <code>、 <dfn>、 <em>、 <i>、 <img>、 <input>、 <kbd>、 <label>、 <q>、 <s>、 <samp>、 <select>、 <small>、 <span>、 <strike>、 <strong>、 <sub>、 <sup>、 <textarea>、 <u>