Html CSS-背景色，包括边距

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

这是我到目前为止的菜单

我已经在容器导航下设置了边距，我希望边距区域也使用边距颜色。我也想让li项目的悬停颜色延伸到边界下，但我不知道如何实现。如果我将边距和边框放在li项目上，边框将不会在屏幕的整个宽度上运行

更新

更新了我的小提琴，包括一个我想要实现的模型-

---

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

尝试用填充替换边距。 有关长方体模型的详细信息，请参见：

---

我希望您正在寻找：

CSS

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

---

您可以使用

之后

和

之前

伪类来获得您想要的结果。

不确定您想要的是什么-快速模型将有帮助。非常感谢！我也可以在我的li元素上使用：after伪类，这样当它们悬停时，行下的空间也会获得悬停颜色。它将与填充一起工作，除非您将

背景剪辑

样式设置为

内容框

。在后一种情况下，填充区域将不着色。当心！

.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;
}

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