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

您可以从 .links class 中删除 overflow 代码并将 height:43px; 放入 .separatorclass.

谢谢

Answer 5

您可以将负边距添加到 class:

.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：您需要删除 "YouTube" 的 p.toptext 中的 style="margin:0;padding:0;" 才能使上述更改生效。

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

DIV is too tall for the text inside

html

css

text