为什么此div的计算高度比其内容高？ [英] Why is this div's calculated height more than its content?

问题描述

我是一个CSS新手，正在WordPress网站上使用查看网站。我使用的主题是二十一岁的孩子。这里是（我认为）重要的CSS：

  #access div {
 margin：0 0 0 0; 
} 
 #access {
背景：＃773736； 
 clear：两者； 
显示：块； 
保证金：0自动； 
宽度：100％； 
 text-align：center; 
} 
 #access ul {
 font-size：13px; 
列表样式：无； 
保证金：0 0 0 -0.8125em; 
 padding-left：0; 
显示：inline-block; 
 font-weight：正常； 
} 
 #access li {
 float：left; 
职位：相对； 
 text-align：左； 
} 
＃访问{{
 color：#eee; 
显示：inline-block; 
线高：3.333em; 
 padding：0 1.2125em; 
文字修饰：无； 
 font-weight：正常； 
} 
  

要摆脱这个额外的高度，我该怎么办？

解决方案

原来是 line-height 问题：

  #access {
背景：＃773736; 
 clear：两者； 
显示：块； 
保证金：0自动； 
宽度：100％； 
 text-align：center; 
行高：12px; / *此功能已解决* / 
} 
  

还应该指出，这是继承自正文的线高1.6​​25（此处应为单位）

I'm a CSS novice working on a WordPress site using the Menubar plugin for the navigation. I've been able to make changes to my CSS for color scheme, centering, and font stuff, but I cannot for the life of me figure out why the div that surrounds the <ul> for the menu has an extra 6 pixels at the bottom. I've tried setting the margin to 0 in several places, changing the line-height...but nothing works.

You can view the site here. The theme I'm using is a child of Twenty Eleven. Here's (I think) the CSS that matters:

#access div {
    margin: 0 0 0 0;
}
#access {
    background: #773736; 
    clear: both;
    display: block;
    margin: 0 auto; 
    width: 100%;
    text-align: center;
}
#access ul {
    font-size: 13px;
    list-style: none;
    margin: 0 0 0 -0.8125em;
    padding-left: 0;
    display: inline-block;
    font-weight: normal;
}
#access li {
    float: left;
    position: relative;
    text-align: left;
}
#access a {
    color: #eee;
    display: inline-block;
    line-height: 3.333em;
    padding: 0 1.2125em;
    text-decoration: none;
    font-weight: normal;
}

What do I have to do to get rid of this extra height?

解决方案

Turns out it was a line-height issue:

#access {
background: #773736;
clear: both;
display: block;
margin: 0 auto;
width: 100%;
text-align: center;
line-height: 12px;/*this fixes it*/
}

Should also point out it was inheriting a line height from body of 1.625 (should be units here)

这篇关于为什么此div的计算高度比其内容高？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！