css - 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 会拉伸(stretch)一点。

非常感谢任何帮助:)

Answer 1

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