html - CSSのアウトラインは要素の下部にのみ表示されますか？

Question

次の例で、赤い輪郭が下部にのみ表示されているのはなぜですか？私はすでにいくつかの変更を行いましたが、問題は残っています。見てください：http： //jsfiddle.net/ny48t/3/

Answer 1

他の3つの側面が窓の外にあるからです。

Answer 2

アウトラインは、マージンで定義された内側の長方形の外側に描画されます。この場合、これも要素がレンダリングできる表示スペースの外側にあり、「ページ外」にあります。

余白（たとえば、5px）を追加すると、アウトラインの残りが表示されます。

Answer 3

境界線の残りの部分を見ることができるように、その周りにマージンが必要です。それ以外の場合、ブラウザウィンドウはそれを切り取ります。

margin: 5px;