border - 将 div 边框延伸到外包装？

Question

这是我的网站

目前仍在摆弄设计布局，有一个问题我无法完全解决。在我的标题上，我有一个红色边框底部，将其与主要内容分开。同样，在页脚我有一个红色的顶部边框来做同样的事情。有没有办法将边界扩展到 div 之外（因此在包装器之外，溢出可见）而不与其他元素冲突？我想配置布局，使其具有更多类似网格的设计。

#wrap {
width: 1000px;
background-color: #ffffff;
text-align:left;
margin: 0 auto 0 auto;
border-left: 1px solid #000000;
border-right: 1px solid #000000; }

#head{
background-color: #ffffff;
width: 1000px;
height: 159px;
border-bottom: 1px solid #ff0000; }

有点像这样？

Answer 1

是的。您可以设置负边距，使 div 扩展到其父级之外，如下所示。（我只做了标题，但你明白了）

小提琴中的解决方案使用烦人的 !important 来获得正确的样式 - 您可能想要重新组织您的 CSS 来解决这个问题并使您的代码更易于维护，请参阅这篇文章。