Q&A
わざわざ編集ありがとうございます。
リンクのご提示で、また勉強になりました。
またよろしくお願いいたします。
まずは、以下のようなHTMLとCSSのコードを書きました。
以下の画像は表示結果です。
html
1<!doctype html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<meta name="viewport" content="width=device-width, initial-scale=1"> 6<title>サンプル</title> 7<link rel="stylesheet" href="sample.css"> 8</head> 9<body> 10<a href="#"> 11 <img class="image" src="./image.jpg" alt="グラフの画像"> 12 <span class="order"></span> 13 <p class="text">こんにちは</p> 14</a> 15</div> 16</body> 17</html> 18
css
1@charset "UTF-8" ; 2.image { 3 width: 100px; 4 height: 100px; 5} 6.text { 7 display: inline-block; 8} 9
この画像のように、こんにちはの左のほうに、アンダーバーが地味に残っています。
これは<a>要素によるもので、text-decoration: none;とすれば消すことができることがわかりました。
しかし、なぜこのような現象になるのかがわからず、モヤモヤしています。
inline-blockする前は、こんにちは全体にアンダーバーがあったので、一部だけにアンダーバーが残ってします理由を教えていただけると助かります。
よろしくお願いします。
google chome
mac mojave 10.14.6
回答2件
0
ベストアンサー
空白文字が描画されるようになって表れたということです。
white-space: pre; などとして強制的に表示させれば inline-block にしなくても見えるかと思います。
https://developer.mozilla.org/ja/docs/Web/CSS/white-space
また、inline-block は装飾対象ではありません。
https://drafts.csswg.org/css-text-decor-3/#line-decoration
https://momdo.github.io/css-text-decor-3/#line-decoration
投稿2019/10/04 04:22
総合スコア13749
0
質問文読み落としてました。
アンダーバーが引かれるのはテキストだけです。
画像やインラインブロック要素には引かれません。
x_xさんがご提示されているリンクの他にもこちらに実際のコード付きで載っています。（出典元は同じですが）
投稿2019/10/03 14:52
編集2019/10/04 07:23
総合スコア10429
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/10/04 07:19