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。

Answer 2

使line-height属性与p

的高度相同

.toptext{
   line-height:100%;
}

Answer 3

没有一点东西可以解决它难以找到问题的根源。但是你似乎拥有0px的所有东西。浏览器上有一些默认的填充，边距等，可以使用以下内容重置。

* {
margin: 0;
padding: 0;
}

Answer 4

您只需向一个类添加负边距：

.toptext {
color: black;
font-family: "Palatino Linotype", Times, serif;
font-weight: bold;
font-size: 40px;
margin: 0 auto;
padding: 0;
vertical-align: middle;
line-height: 100%;
margin-top: -4px;
margin-bottom: -5px;
}

我添加的最后两个css规则。您可以轻松编辑它们以使红色边框更近或更远。

    margin-top: -4px;
    margin-bottom: -5px;

PS：您需要删除p.toptext中的style="margin:0;padding:0;"以获取＆＃34; YouTube＆＃34;因上述变化对其产生影响。

Answer 5

您可以从overflow课程中删除.links代码，并将height:43px;添加到.separator课程。

谢谢