导航栏中垂直链接的填充答案

【问题标题】：padding for links vertical in nav bar导航栏中垂直链接的填充
【发布时间】：2013-02-28 21:55:21
【问题描述】：

我已经为我的网站设计了一个新菜单，但我似乎无法在垂直的链接之间安排空间（我希望链接之间有更多的空白）有什么建议吗？

html

<ul class="menu">
<li><a href="#about">ABOUT</a></li>
<li><a href="#contact">CONTACT</a></li>
<li><a href="#services">SERVICES</a></li>
</ul>

css

ul.menu
{
list-style-type:none;
list-style-position: inside;
margin:0;
padding:0;
padding-bottom: 1cm;
}



.menu li a, .menu li a:visited
{
padding:12px 0 0 0px;
font-family: 'Roboto Condensed', sans-serif;font-size:20px;font-weight:700;
color:#FFFFFF;
background-color:#09F;
text-align:center;
padding:3px;
text-decoration:none;

}

.menu li a:hover, menu li a:active {
background-color:#666;
}

如你所见，我尝试了一段 css 的间隙：{padding:12px 0 0 0px;} 但没有运气......其他一切正常很好 - 见小提琴@@ 987654321@

【问题讨论】：

.menu li a, .menu li a:visited 有两个填充定义，一个首先是 12px，然后是 3px。全部删除，只需将行高添加到您的 ul，（大于您的字体大小）
谢谢，我尝试添加 line-height 和下面的一些答案 - 效果很好 - 请参阅最终方法的小提琴jsfiddle.net/gzN9N/1

标签： css menu padding space nav

【解决方案1】：

锚点默认是内联元素。要添加某些填充值，您需要将它们呈现为内联块级元素。将display: block 添加到您的锚样式中：

.menu li a { display: inline-block }

另外，您应该注意您的.menu li a 样式有两个padding 条目。后一个（将所有边的填充设置为3px）覆盖了您之前的定义。

这是jsFiddle demo。

【讨论】：

【解决方案2】：

如果我没记错的话，您想在链接之间垂直插入空格。为此，您所要做的就是：

.menu li {
  margin-bottom: 10px;
}

fiddle with the margin solution.

另一方面，如果您希望菜单的背景保持为蓝色，并且在悬停时颜色发生变化，那么这里就是解决这个问题的方法。我还重构了您的 css，以更直观的方式排列规则。

fiddle with the menu background as a solid colour without white line breaks.

【讨论】：

感谢您的回答，我可能会更改为单宽设置