Html CSS - 背景颜色包括边距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13415733/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS - background-color including margin
提问by user1573618
I am trying to create a horizontal navigation menu. The menu needs to be full screen width, with a border bottom running the whole width too. I have more or less acheived this apart from I would like to have a margin of about 15px under the menu, and for this to use the background color of my menu. Also when an item is hovered, the hover color should extend under the border too if that makes sense.
我正在尝试创建一个水平导航菜单。菜单需要全屏宽度，边框底部也运行整个宽度。除了我希望在菜单下有大约 15px 的边距外，我或多或少地实现了这一点，并为此使用了我菜单的背景颜色。同样，当一个项目被悬停时，悬停颜色也应该在边框下延伸，如果这是有道理的。
Here is a fiddle of my menu so far - http://jsfiddle.net/J74eE/2/
到目前为止，这是我的菜单的小提琴 - http://jsfiddle.net/J74eE/2/
Tried to insert my code here but the li items got converted to bullets
I have set a margin under the container nav, and I would like the border color to be used on the margin area too. I would also like to somehow have the li items hover color to extend under the border too but I have no idea how this might be acheived. If I put the margin and border on the li items the border won't run the full width of the screen.
我在容器导航下设置了一个边距，我也希望在边距区域使用边框颜色。我也想以某种方式让 li 项目悬停颜色也延伸到边界下，但我不知道如何实现。如果我将边距和边框放在 li 项目上，边框将不会占据屏幕的整个宽度。
Update
更新
Updated my fiddle to include a mock-up of what I want to acheive - http://jsfiddle.net/J74eE/3/
更新了我的小提琴以包含我想要实现的模型 - http://jsfiddle.net/J74eE/3/
I can't use padding as that pushes the border-bottom down, and I want to have a border with background-color underneath it.
我不能使用填充，因为它会将边框底部向下推，我想在它下面有一个带有背景颜色的边框。
采纳答案by Shailender Arora
回答by gregorySalvan
Try to replace your margin by a padding. See more at box model: http://www.w3.org/TR/CSS2/box.html
尝试用填充替换您的边距。查看更多框模型：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;
}
