DEMOページ（JavaScript版）
アコーディオン(1)（正しく設置されている例）
- Q1.なぜこちらのアコーディオンは上にズレないのですか？
- A.親要素の上側の余白にぴったり合わせているからです。
- Q2.つまりどういうことですか？
- A.親要素の高さをpaddingで指定することでグラつきが発生しなくなります。
アコーディオン(2)（親要素の高さが変わり上下に表示位置ずれてしまう失敗例）
- Q1.なぜこちらのアコーディオンは上にズレてしまうのですか？
- A.親要素に高さを指定しており、その中央に表示するという形で表示しているからです。
- Q2.つまりどういうことですか？
- A.親要素の高さをheightで指定し「align-items: center;」などを指定するとでグラつきが発生します。flexで指定していると起こりやすいです。