DIV 对于里面的文字来说太高了

Question

嘿，我在弄清楚这个问题时遇到了一些麻烦。我有一个 DIV，我只想和其中的文本一样高，但出于某种原因，它坚持要高一点。这是它的样子：

http://admiraltheband.com/index3956.html

我希望红色边框围绕文本而不是更高。这是代码。

/*CSS:*/

    p {
            color:#fff;
            margin:0;
            padding:0;
            vertical-align:middle;
    }
    
    .separator {
    	    height:48px;
            width:1px;
            background-color: #000;
        	margin:0 auto;
        	padding:0;
    }
    
    .links {
        	overflow:auto;
        	margin:0 auto;
        	width:375px;	
    }

    .toptext {
    	    color:black;
    	    font-family: "Palatino Linotype", Times, serif;
    	    font-weight:bold;
    	    font-size:40px;
    	    margin:0 auto;
    	    padding:0;
    	    vertical-align:middle;
    }
    
    .facebook {
    	    float:left;
    	    text-align:center;
    	    vertical-align:middle;
    	    /* margin-top:-4px; */
    	    padding:0;
    	    border:1px solid red;
    }
    
    .youtube {
    	    float:right;
    	    text-align:center;
    	    vertical-align:middle;
    	    /* margin-top:-4px; */
    	    padding:0;
    	    border:1px solid red;
    }
    
    a {
    	    padding:0;
    	    margin:0;
    }

HTML:

    <div class="links">
        
                <div class="facebook">
            	    <a href="https://www.facebook.com/admiralmusic" 
                    target="_blank"><p class="toptext">Facebook</p></a>
                </div>


                <div class="youtube">
            	    <a href="https://www.youtube.com/channel/UCXCmjrxe-ySnvigewJvGbfQ" 
                    target="_blank"><p class="toptext" style="margin:0;padding:0;">YouTube</p></a>
                </div>
                
                <div class="separator">
                </div>
                
    </div>

我一直在段落和所有父元素上放置 0 填充和 0 边距，但无济于事。我注释掉了我可能最终用来使事情对齐的负边距。我只是好奇为什么这个 DIV 有点拉伸。

任何帮助是极大的赞赏 ：）

Answer 1

尝试添加line-height: 1;到您的类.facebook和.youtube.