DIV对于文本内部来说太高

嘿，我一直在解决这个问题时遇到了一些麻烦。我有一个DIV，我想只与它内部的文本一样高，但由于某种原因，它坚持要高一点。这里是什么样子：DIV对于文本内部来说太高

http://admiraltheband.com/index3956.html

我想要的红色边框拥抱而不是被更高周围的文本。这是代码。

/*CSS:*/ 
 

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

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

HTML: 
 

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

 

 
       <div class="youtube"> 
 
      \t  <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为什么会延伸一点点。

任何帮助是极大的赞赏:)

来源

2015-01-17 JMD123

尝试使用代码段复制问题。 –

你是什么意思？问题在哪里？ – jmore009

这将使其更加清晰： http://admiraltheband.com/index3956.html 我想让红色边框在文字周围拥抱而不是高高。 – JMD123

尝试增加line-height: 1;到类.facebook和.youtube。

来源

2015-01-17 18:26:31 dersvenhesse

充分利用line-height为您p

.toptext{ 
    line-height:100%; 
}

来源

2015-01-17 18:27:49 Ozan

高度属性相同的不带一点东西玩弄它很难找到问题的根源。然而你似乎拥有0px的一切。浏览器上有一些默认填充，页边距等，可以使用以下方式重置。

* { 
margin: 0; 
padding: 0; 
}

来源

2015-01-17 18:28:36 Creaven

您可以从.links类中删除overflow代码，并把height:43px;到.separator类。

谢谢

来源

2015-01-17 19:01:26

你可以只添加切缘阴性的一类：

.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;

enter image description here

PS：您需要删除p.toptext内style="margin:0;padding:0;"为 “YouTube” 的对上述变化有它的作用。

来源

2015-01-17 19:50:34 Preben

嘿，非常感谢！这就是我想要的。 – JMD123

DIV对于文本内部来说太高

回答

相关问题