<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

回答

相關問題