不需要的空白答案

【问题标题】：Unwanted Whitespace不需要的空白
【发布时间】：2014-05-29 21:29:27
【问题描述】：

我最近问了一个类似的问题，关于导航按钮和上下有空格，得到了很好的回答。这是问题Navigation Buttons no whitespace underneathe

基本上现在我在按钮上方有空格，我需要将其关闭。

我还希望按钮中的文本在垂直和水平方向上居中。

Js 小提琴：

html:

<div class="row">
    <div class="large-9 small-12 columns" id="contact-top-pad">
        <p>
            <span class="contact-top">Phone</span><span class="smaller">- 0757776856</span> 
            <span class="contact-top">Email</span><span class="smaller">- luke@bodymetrix.com</span>
    </div>
    <div class="large-3 small-10 columns" id="social-btn">
        <img src="img/facebook-btn.png" alt="Facebook">
        <img src="img/twitter-btn.png" alt="Twitter">
        <img src="img/pin-btn.png" alt="Pintrest">
        <img src="img/google-btn.png" alt="Google+">
    </div>        
    <hr>
</div>

<div class="row">
    <div class="large-6 small-12 columns">
        <div class="logo"><img src="img/logo.png" alt="Body Metrix"></div>
    </div>

    <div class="large-6 columns" id="nav-btn">
        <ul class="navigation">
            <li class="active"><a href="home.html">Home</a></li><!--
         --><li class="not"><a href="#">About</a></li><!--
         --><li class="not"><a href="#">Contact</a></li><!--
         --><li class="not"><a href="#">Services</a></li>
        </ul>
    </div>
    <hr>
</div><!--

CSS：

hr {
    margin:0;
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0,0,0,0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

#social-btn{    
    display: inline;
    padding-left: 50px;
    padding-top: 20px;
}

#contact-top-pad {    
    padding-top: 25px;    
}

.contact-top {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: bold;
    display: inline;    
}

.smaller {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: lighter;    
}

.logo img {
    max-width: 35%;
    min-height: auto;
    padding-bottom: 10px;
}

.navigation { margin:0; }

谢谢

【问题讨论】：

您能提供一个jsfiddle.net吗？
+1 Pedro，或您正在制作的指向此站点的链接，以便我们可以“检查元素”或其他内容。
您没有注释掉 ul 和第一个 li 之间的初始空格或结束 li 和结束 ul 标记之间的空格，您可能还需要在 .导航
添加在上面，网站没有上线所以不能给你链接
img 内的div.logo 有一个padding-bottom 的10

标签： html css whitespace

【解决方案1】：

从hr 中删除border-bottom 以摆脱选项上方的小空间：

hr {
    margin:0;
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0,0,0,0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

并且还添加一个line-height: 100px; 到.navigation li a，这将使文本垂直居中：

.navigation li a {
    text-align: center;
    padding: 30px 10px 10px 30px;
    line-height:100px;
}

这里是小提琴：http://jsfiddle.net/ygfX7/5/

【讨论】：

【解决方案2】：

添加与li高度相同的line-height值

.navigation li a {
    text-align: center;
    padding: 30px 10px 10px 30px;
    line-height:100px;
}

结果： http://jsfiddle.net/ygfX7/1/

【讨论】：