CSS - 背景颜色包括边距答案

【问题标题】：CSS - background-color including marginCSS - 背景颜色包括边距
【发布时间】：2016-06-28 04:10:31
【问题描述】：

我正在尝试创建一个水平导航菜单。菜单需要是全屏宽度，边框底部也需要全屏宽度。我或多或少地实现了这一点，除了我希望菜单下有大约 15px 的边距，并且为此使用我的菜单的背景颜色。此外，当项目悬停时，悬停颜色也应在边框下方延伸（如果有意义的话）。

到目前为止，这是我的菜单的一个小技巧 - http://jsfiddle.net/J74eE/2/

Tried to insert my code here but the li items got converted to bullets

我在容器导航下设置了一个边距，我也希望在边距区域使用边框颜色。我还想以某种方式让 li 项目的悬停颜色也延伸到边框下方，但我不知道如何实现这一点。如果我将边距和边框放在 li 项目上，则边框不会占据屏幕的整个宽度。

更新

更新了我的小提琴以包含我想要实现的模型 - http://jsfiddle.net/J74eE/3/

我不能使用填充，因为它会将边框底部向下推，我希望在它下面有一个带有背景颜色的边框。

【问题讨论】：

不确定您到底在寻找什么 - 快速模拟会有所帮助。

标签： html css

【解决方案1】：

尝试用填充替换您的边距。在盒子模型中查看更多信息：http://www.w3.org/TR/CSS2/box.html

.nav-menu {
   background-color:#FEFFE5;  
   clear:both;
   float:left;
   padding:0px 0px 15px 0px;
   border-bottom: 1px solid #dbd7d4;
   width:100%;
   font-size:13px;  
   z-index:1000; /* This makes the dropdown menus appear above the page content below */
   position:relative;
}

【讨论】：

它将与填充一起使用，除非您将 background-clip 样式设置为 content-box。在后一种情况下，填充区域不会被着色。当心！

【解决方案2】：

我希望你正在寻找这个：DEMO

CSS

.nav-menu:after {
  background-color:#FEFFE5;
  position:absolute;
  content:"";
  left:0;
  right:0;
  height:15px;
  top:40px;
}

您可以使用after 和before 伪类来获得所需的结果。

【讨论】：

非常感谢！我也可以在我的 li 元素上使用 :after 伪类，这样当它们悬停时，线条下方的空间也会获得悬停颜色。