html - CSS大纲只出现在元素的底部？

Question

为什么在下面的示例中，红色轮廓仅出现在底部？我已经做了一些更改，但问题仍然存在。看看：http: //jsfiddle.net/ny48t/3/

Answer 1

Outline 被绘制到由 Margin 定义的内部矩形的外部。在这种情况下，这也在元素可以呈现的可见空间之外并且“不在页面”。

添加一个边距（例如，5px），轮廓的剩余部分将变得可见。

Answer 2

因为其他三个面都在窗外。

Answer 3

您需要在它周围留出一个边距，以便可以看到其余的边框。否则浏览器窗口会将其关闭。

margin: 5px;