テキストリンクの下線の位置が文字から離れているのを近付けたい

前提・実現したいこと

はてなブログにてCSSを調整しているのですが、
ブログ記事の本文において、テキストリンクの下線の位置が文字から離れているのを近付けたいです。
どのようにコードを書き換えたら下線を適切な位置に設定できるのか、教えていただきたいです。

発生している問題・エラーメッセージ

該当のソースコード

CSS
1.entry-content {
2    line-height: 1.5;
3}
4.etnry-content p {
5    margin:0 0 0 0;
6    padding:0 0 0 0;
7}
8.entry-content p a {
9    color: #c97a2b;
10    text-decoration: none;
11    border-bottom: solid 1px;
12    padding-bottom: 0px;
13}

HTML
1<div id="content" class="hfeed"
2  
3  >
4  <div id="content-inner">
5    <div id="wrapper">
6      <div id="main">
7        <div id="main-inner">
8  
9  <!-- google_ad_section_start -->
10  <!-- rakuten_ad_target_begin -->
11  
12        <article class="entry hentry js-entry-article date-first autopagerize_page_element chars-200 words-100 mode-hatena entry-odd" id="entry-10257846132696381166" data-keyword-campaign="" data-uuid="10257846132696381166" data-publication-type="entry">
13  <div class="entry-inner">
14    <header class="entry-header">
15  
16    <div class="date entry-date first">
17    <a href="URL" rel="nofollow">
18      <time pubdate datetime="2019-01-03T14:53:47Z" title="2019-01-03T14:53:47Z">
19        <span class="date-year">2019</span><span class="hyphen">-</span><span class="date-month">01</span><span class="hyphen">-</span><span class="date-day">03</span>
20      </time>
21    </a>
22  </div>
23  <h1 class="entry-title">
24  <a href="URL" class="entry-title-link bookmark">【テスト】</a>
25</h1>
26  <div class="entry-categories categories">
27    
28    <a href="URL" class="entry-category-link category-雑記">雑記</a>
29    
30  </div>
31</header>
32    <div class="entry-content">
33    <p>テストテストテストテストテストテスト<br />
34テストtest3<a href="URL">&#x30C6;&#x30B9;&#x30C8;</a>テスト<br />
35テストテストテストテストテストテスト</p>
36  
37</div>
38
39  <footer class="entry-footer">
40    
41    <p class="entry-footer-section">
42  <span class="author vcard"><span class="fn" data-load-nickname="1" data-user-name="aso">aso</span></span>
43  <span class="entry-footer-time"><a href="URL"><time data-relative datetime="2019-01-03T14:53:47Z" title="2019-01-03T14:53:47Z" pubdate class="updated">2019-01-03 23:53</time></a></span>
44</p>

試したこと

①「line-height」の値を調整
テキストを反転して見てみると、テキストの上下の余白が少し大きいので、
それが原因かな？と思い、「line-height」の値を調整してみましたが、下線には影響なし。

②「border-bottom」ではなく「text-decoration:underline」に変更
下線は表示されなくなる。親要素のせい？

③「padding-bottom」の値を調整
「padding-bottom」の値を「0」から「10」に変更すると、下線が離れる。
そこで「-10」にしてみたが、「0」より上には行ってくれない。。

④「entry-content p」のpaddingの値を調整
padding-bottomを「0」から「-10」とかにしてみたけど、変化なし。

⑤親要素の影響を確認
CSSファイルの上のほうで全体に関わる指定をしてるところを確認してみて、
wrapperとかかな？と思いつつ、それらしき要因を見つけられず。。

補足情報（FW/ツールのバージョンなど）

「.entry-content」と「.entry-content p」の違いがよく分かっていないので適当に記述してしまってるのですが、それも関係あるのでしょうか。。

yoshinavi

2019/01/04 17:13

HTMLも提示してください。

行動規範の内容に同意します

回答1件

ベストアンサー

なるべく全体のCSSとHTMLを提示したほうが解決しやすいと思います。
important指定は使わないほうが良いですが、とりあえず。

CSS
1.entry-content p a {
2    text-decoration: underline !important;
3}

また、paddingにマイナス値はありません。
どういうCSSが影響しているかはデベロッパーツールで確認してみてください。

【ChromeデベロッパーツールでCSSをチェックする方法 | なんでものびるWEB】
https://nandemo-nobiru.com/2944/

追記：

text-decoration: none; の状態で border-bottomを下にぴったり付けたい場合、display: inline-block; line-height: 1; を付けるととりあえずできる。

CSS
1p {
2    line-height: 1.8;
3}
4a {
5    border-bottom: 2px solid green;
6    line-height: 1;
7    display: inline-block;
8    text-decoration: none;
9}
10```**動くサンプル：**[https://jsfiddle.net/zu4acm7p/](https://jsfiddle.net/zu4acm7p/)