Q&A
フォント、ブラウザの組合せによる為、希望の高さにするのは難しいようです。
https://oshin.tokyo/entry/2019-css-font-size
すごく初歩的な内容かもしれないのですが、aタグ内のテキストに対してfont-size:14pxを設定した場合、テキスト自体は14pxとなっていますがaタグの高さが21pxとなっています (ブラウザはGoogle Chrome)。結果、aタグの親要素であるliタグの高さを超える状態となっているのですが、aタグの高さをテキストと同じ高さにすることはできないでしょうか？すいませんがどなたかヒントを頂けると幸いです。よろしくお願いいたします。
(スクリーンショット)開発ツールで見ると、aの高さが21pxとなってしまう
(スクリーンショット)一方、liの高さはフォントサイズと同じく14px
(コード)
html
1<nav class="nav-def"> 2 <ul class="list"> 3 <li class="item"> 4 <a class="txt" href="#">サンプル</a> 5 </li> 6 <li class="item"> 7 <a class="txt" href="#">サンプル</a> 8 </li> 9 <li class="item"> 10 <a class="txt" href="#">サンプル</a> 11 </li> 12 <li class="item"> 13 <a class="txt" href="#">サンプル</a> 14 </li> 15 <li class="item"> 16 <a class="txt" href="#">サンプル</a> 17 </li> 18 </ul> 19</nav>
SCSS
1.nav-def { 2 > .list { 3 list-style-type: none; 4 padding-left: 0; 5 display: flex; 6 } 7 > .list > .item { 8 margin-right: 2rem; 9 } 10 > .list > .item > .txt { 11 font-size: 14px; 12 color: $color-link; 13 line-height: 1; 14 }
a要素のdisplayを変えることはやっても大丈夫でしょうか？
回答2件
0
「テキストの高さに共連れて.listの高さが変わってしまうのが嫌」という意味合いであれば、
.listにheightとalign-items: center;の指定を追加してみるのはいかがでしょうか？
投稿2021/02/25 02:07
総合スコア24
0
css
1> .list > .item > .txt { 2 display: inline-block; /* これにすることで、高さの調整が効きやすくなる */ 3 font-size: 14px; 4 color: $color-link; 5 line-height: 1; 6}
投稿2021/02/24 14:03
総合スコア9555
あなたの回答
tips
プレビュー
