<A Href> has a lot of empty space beneath the text

EDIT: I've made a few changes, based on suggestions, but the problem is persisting on IE, and I don't think I'm doing anything too fancy for IE. I'm not sure what's getting lost in translation.<A Href> has a lot of empty space beneath the text

I'm working on an assignment for class, where we're using html & css to make a web page.

I'm trying to create a horizontal nav bar at the top of a web page, and I've gotten the navbar to behave mostly how I'd like. The problem is that I want the text of the link snug against the bottom of the nav bar, but the area of the link is doing one of two things depending on how I approached the problem (EDIT: Now only happening in internet explorer).

My first instinct was to use vertical-align, but I have since read in 5 or 6 threads that it does not work on inline elements.

I have toyed around with altering the height and line height, to try and get an alignment that works (text at the bottom of the link), but that has ended up pushing the text, AND the area of the of the link down past the nav bar.

I've also tried toying with the padding-bottom, to try and see if I can adjust that, and one way or another, and I've only been able to push the link further upward with that.

I've been researching around for something that can help me find a fix, and I've found a lot of articles that are close but no cigar.

Some of the things I've looked at are (woops I guess I can only post two links): Why anchor tag does not take height and width of its containing element

有是一个关于某些字体下方空白处，并有几个关于表，和一些关于垂直对齐方式。

这是我在哪里至今：http://jsfiddle.net/brezzen/w09q7h7y/2/

HTML：

<body> 
    <header> 
     <nav class="header"> 
      <ul> 
       <li><a href= "#">Contact</a></li> 
       <li><a href= "#">Values</a></li> 
       <li><a href= "#">About</a></li> 
       <li><a href= "#">Home</a></li> 
      </ul>  
     </nav> 
    </header> 
    <article> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <br />  bleep blorp bloop 
    </article> 
</body>

CSS：

/* Debugging */ 

* 
{ 
    border: 1px solid red; 
} */ 

/* Blocking & Defaults */ 

header, article, aside, figure, figcaption, hgroup, section, nav 
{ 
    display: block; 
} 

* 
{ 
    font-family: 'Kozuka Gothic Pro EL', 'Kozuka Gothic Pro', Myriad, Helvetica, sans-serif; 
    font-size: 100%; 
    color: white; 
    padding: 0px; 
    margin: 0px; 
} 


/* Body */ 

body { 
    background-color: #bbffff; 
    font-weight: normal; 
    position: relative; 
    min-width: 1000px; 
    max-width: 2000px; 
} 

/* All Navigation */ 

nav { 
    position: absolute; 
    right: 0; 
    top: 0; 
    width: 100%; 
    height: 82px; 
    background-color: #7396ff; 
    border-bottom: 3px solid #bbbbbb; 
} 

nav ul { 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    left: 0; 
    padding-right: 10%; 
    list-style-type: none; 
    font-size: 125%; 
} 

nav ul li { 
    display: inline-block; 
    vertical-align: bottom; 
    float: right; 
} 

nav ul li a { 
    color: white; 
    text-decoration: none; 
}

我不知道什么是布莱恩，但是文字下面的空白空间很大，所以我很难相信它只是一个字体怪癖。我认为在链接区域内移动文本会比这更容易，我想我已经在这里头了。任何帮助，或方向一个良好的资源将不胜感激。

来源

2015-09-04 Jade Dougherty

你为什么要在你的问题中的每个段落的第一个字是大胆的？这太让人分心了，我在阅读你的问题时遇到了麻烦。 – gilly3

当新的段落在前几个字中缩进或加粗时，我可以更轻松地阅读长段文本。 –

line-height您正在将字体大小增加到125％，并且每行文本的“高度”都会影响此字体。（http://jsfiddle.net/w09q7h7y/3/）

nav ul { 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    left: 0; 
    padding-right: 10%; 
    list-style-type: none; 
    font-size: 125%; 
    line-height: 1; 
}

来源

2015-09-04 20:11:44 Leeish

我不太确定我是否理解你对此评论的看法。为了看看会发生什么，我删除了字体大小的改变和行高，完全看到会发生什么，而且href的空间仍然是文本本身高度的两倍，这使我相信我误解了你这里。编辑：好的，我在其他一些浏览器中看了一下，我只在IE中获得了这个加倍的高度。我应该在某处放置供应商标签吗？ –

我不知道你的问题是什么。我在Chrome中加载页面时，通过将行高设置为1来删除字母上下的间隔。认为这是您的问题。在IE中加载页面我确实看到这些单词被推到了它们的区域顶部。 – Leeish

哈哈，至少现在我知道我不是唯一看到它的人;那是一种解脱。它给了我更多的想法来改变和改变。感谢你的宝贵时间。 :) –

有几种垂直排列元素的方法。如果元素中只有一行文本，最简单的方法是将行高设置为与元素的高度相同。

使用％设置字体大小不是一个好习惯。相反，请使用px，em或rem。

nav ul { 
    height: 1.5rem; 
} 
nav li { 
    margin: 0; 
    padding: 0 0.4rem; 
    height: 1.5rem; 
    line-height: 1.5rem; 
    font-size: 1rem; 
}

取决于你如何组织你的CSS，你可能想样式添加到锚这样

nav li a { 
    margin: 0; 
    padding: 0 0.4rem; 
    height: 1.5rem; 
    line-height: 1.5rem; 
    font-size: 1rem; 
}

为好。注意特殊性。

来源

2015-09-04 20:32:20 jayscript

感谢您提出如何改进我的风格的建议，但即使进行了这些更改，我仍然在IE上仍然有一个很大的空白空间，大约是我的文本高度的两倍，在文本之下仍是可点击的链接。虽然这在其他地方很好，所以谢谢你！ –

检查Chrome中的元素。Command + Option + I来打开开发工具，并告诉我们你看到了什么。 – jayscript

在附注中，您不应该大写html标签。他们仍然会渲染，但没有违背惯例的意图。 – jayscript

<A Href> has a lot of empty space beneath the text

回答

相关问题