목록 항목 내의 링크는 목록 요소보다 높이가 더 큽니다. 무슨 일입니까?

Question

나는 한 nav링크 목록을 포함. 목록에는 line-height: 1em. 그러나 링크의 높이 1em가 앞의 목록 항목 보다 크고 겹치므로 항목을 클릭하기가 어렵습니다.

nav {
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 7.2rem;
  left: 0;
  right: 0;
  font-size: 50px;
  line-height: 1em;
}

nav li {
  background-color: green;
}

nav a {
  background-color: pink;
}

<nav>
  <ul>
    <li><a href="projects.html">Projects</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="ethical-design.html">Ethics</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

내가 추가 할 경우에 더 쉽게 볼 수 있습니다 margin-bottom받는 사람 nav li. 링크 (분홍색)는 목록 항목 (녹색)의 줄 높이보다 높이가 큽니다.

링크의 높이가 목록 항목과 같도록하려면 어떻게합니까? 겹치지 않도록?

노트. 링크에 패딩이 없어서 왜 더 큰지 모르겠습니다. 내가 추가 할 경우 그것은 어떤 변화를하지 않는 height:1em받는 사람 nav a. 나는 display : inline-block-분홍색 배경을 녹색 배경과 같은 높이로 만들었지 만 이상하게도 링크는 여전히 분홍색 배경 바로 위와 아래에서 클릭 할 수 있습니다! 클릭 가능한 영역은 분홍색 배경으로 제한되지 않습니다.

새로운 정보

링크는 font-size.

링크의 크기는 line-height.

예를 들어 텍스트 줄의 font-size: 50px높이는 50px입니다. 그러나 텍스트 줄 안의 링크의 높이는 68px입니다 (링크에 패딩이나 여백이 없습니다).

링크 주변의 클릭 가능한 영역은 서체의 모든 어 센더와 디 센더를 고려해야한다고 가정합니다. 그리고 이것이 글꼴 크기보다 높이가 더 큰 이유입니다.

따라서 line-height가 1em으로 설정되면 링크가 겹칩니다. 를 사용 display: inline-block하면 분홍색 배경이 녹색 배경과 같은 높이로 표시되지만 (이상하게도) 클릭 가능한 영역은 여전히 ​​50px 분홍색 배경 높이보다 큽니다.

링크의 높이를 글꼴 크기의 높이로 제한하는 방법이없는 한이 차이를 설명하기 위해 줄 높이를 늘려야합니다.

이 JS Fiddle은 링크가 글꼴 크기보다 얼마나 큰지 보여줍니다. https://jsfiddle.net/utqafz61/

... 따라서 줄 높이가 글꼴 크기 (1em)와 같으면 링크가 겹치므로 오른쪽 링크를 클릭하기 어렵습니다. 나는이 웹 사이트에서 이것을 처음 발견했다 :https://www.hassellstudio.com탐색 메뉴에서 링크가 겹칩니다. 마우스 포인터는 하나의 링크에있을 수 있지만 아래 링크가 강조 표시됩니다!

Answer 1

당신이하고 있던 이상한 점은 설정하는 것입니다 font-size의 nav어떤이의 부모 ul li에 10rem그 그들에게 더 큰 만들었다 또한 line-height실제가에서 다른 height여기 SE는line-height

예

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

nav {
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 7.2rem;
  left: 0;
  right: 0;
  /* font-size: 10rem;*/
}

nav li {
  margin: 10px;
  background-color: green;
}

nav a {
  background-color: pink;
}

<nav>
  <ul>
    <li><a href="projects.html">Projects</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="ethical-design.html">Ethics</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

Answer 2

요소에 추가 display: inline-block하기 만하면 a됩니다.

앵커 태그는 오버플로를 일으키는 사용자 에이전트 스타일 시트에 의해 자연스럽게 인라인됩니다.

Answer 3

문제는 line-height내비게이션에 있습니다. 줄 사이에 공백이 없습니다. . line-height더 크게 만들 수 있습니다 (1.1em은 위의 코드에서 작동합니다).

nav { line-height: 1.1em; } 

또는 기본값을 사용하도록 모두 제거하십시오.

최신 정보:

줄 높이를 1em에서 변경할 수없는 경우이를 달성하는 데 문제를 일으키는 두 가지 근본적인 문제가 있습니다.

1. a 태그는 기본적으로 인라인이므로 여백 및 패딩 등으로 작업하기가 더 어렵습니다.
2. 대부분의 글꼴은 위와 아래에 추가 공간이 있으므로 어 센더와 디 센더가 건드리지 않습니다. 이것은 글꼴 글리프 자체에 있습니다. 일부 글꼴은 다른 글꼴보다 "나쁘다".

li다음을 사용하여 링크가 외부로 오버플로되지 않도록 강제 할 수 있으며 마우스가 한 링크 위에있는 것처럼 보이지만 실제로 다른 링크를 활성화하는 효과를 방지 할 수 있습니다.

nav li {
    background-color: green;
    overflow: hidden;        /* this will crop off anything outside the element */
}

그러나 글꼴에 따라 문자의 디 센더에서 작은 부분이 잘릴 수 있습니다.

작업 스 니펫 :

ul {
  margin: 0;
    padding: 0;
    border: 0;
    vertical-align: top;
    list-style: none;
}

nav {
    height: 100%;
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    line-height: 1em;
    font-size: 3rem;
    font-family: "Times New Roman";
}

nav li {
    background-color: green;
    overflow: hidden;
}

nav a { 
    background-color: pink;  
}

nav li:hover a{ 
    background-color: yellow;  
}

<nav>
    <ul>
        <li><a href="projects.html">Projects</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="ethical-design.html">Ethics</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>   
</nav>

줄 높이 (약간이라도)를 변경하지 않고는 쉽게 해결할 수 없지만, 활성 링크를 이동하지 않고 링크 텍스트를 몇 픽셀 위로 이동할 수 있는지 확인하기 위해 다양한 해킹을 시도했습니다.

당신이 만드는 것이 가능한 경우 a로 display: block, 다음이 작동하는 것 같다 :

nav li {
    background-color: green;
    overflow: hidden;
}
nav a {
  background-color: pink;
  display: block;
  /* tweak the values below to suit */
  margin-top: -2px;
  padding-bottom: 2px;
}

해결책 :이 문제를 해결하려면 overflow : hidden, negative margin 및 padding을 사용하십시오.

음수 여백은 링크 상단 (추가 공간이 있음) 위로 이동하고 패딩은 디 센더를위한 약간의 공간을 추가합니다. òverflow:hidden온 li여분 떨어져 작물.

아래에서 작동하는 것을 볼 수 있습니다. 참고로 여백과 패딩을 크게 과장 하여 겹침없이 작동하는지 확인하고 링크 주변에 테두리를 추가하여 링크가있는 위치를 명확히했습니다.

ul {
  margin: 0;
    padding: 0;
    border: 0;
    vertical-align: top;
    list-style: none;
}

nav {
    height: 100%;
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    line-height: 1em;
    font-size: 3rem;
    font-family: "Times New Roman";
}

nav li {
    background-color: green;
    overflow: hidden;
}

nav a {
  background-color: pink;
  display: block;
  margin-top: -20px;
  padding-bottom: 20px;
  border:1px solid blue;
}

nav li:hover a{ 
    background-color: yellow;  
}

<nav>
    <ul>
        <li><a href="projects.html">Projects</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="ethical-design.html">Ethics</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>   
</nav>

제가 생각해 낼 수있는 한 좋은 것입니다.이 옵션 중 하나가 적합하기를 바랍니다.