次のフィドルを見てください。
アンカー/リンクでラップされたテキストを含む画像がある場合、コード内の画像とテキストの間の空白により、レンダリングされたページのテキストの直前に下線付きの空白が作成されます。
画像がない場合、コードに空白があっても下線付きの空白はありません。
この下線付きの空白を回避できる唯一の方法は、コード内の空白を削除することです。しかし、レンダリングされたページの表示を変更するためにコーディング スタイルを変更するのは嫌いです。いずれにしても、ページの表示を操作するために HTML を変更するのは間違っています。<br/>CSS を使用する代わりに、改行 ( ) を使用して要素間にスペースを追加するようなものです。
この問題を解決するために使用される、それほど自明ではない CSS プロパティはありますか?
更新 何らかの理由で、人々は私がコードに持っていた画像の境界線とマージンに夢中になっています. 見栄えを良くするために入れただけです。それらは問題とは何の関係もないので、問題が何であるかをより明確に理解できるように、それらを削除してフィドルを更新しました。
a次のように要素のCSSを設定できます。
a {
display: inline-block;
}
いくつかの CSS で効果をエミュレートできます。
img {
border: 1px solid #CCC;
padding: 10px;
vertical-align: middle;
float:left;
}
a {
display:block;
height:70px;
line-height:70px;
}
発生している動作は仕様の一部です ( http://www.w3.org/TR/html401/struct/text.html ):
PRE を除くすべての HTML 要素では、空白のシーケンスが「単語」を分離します (ここでは、「空白以外の文字のシーケンス」を意味するために「単語」という用語を使用します)。テキストをフォーマットするとき、ユーザー エージェントはこれらの単語を識別し、特定の書き言葉 (スクリプト) とターゲット メディアの規則に従って配置する必要があります。
このレイアウトでは、単語間にスペース(単語間スペースと呼ばれる) を配置する必要がありますが、単語間スペースの規則はスクリプトによって異なります。たとえば、ラテン語のスクリプトでは、通常、単語間のスペースは ASCII スペース ( ) としてレンダリングされますが、タイ語では幅ゼロの単語区切り ( ) になります。日本語と中国語では、通常、単語間スペースはまったくレンダリングされません。
したがって、マークアップに要素 (img) の後に空白 (改行) を追加することで、画像を「単語」として解釈し、エージェントが設定されている言語に応じて空白を追加するようにエージェントに指示します。結果からこの空白を削除するには、マークアップから削除する必要があります。
または、マークアップから画像を完全に削除し、代わりにアンカーの背景として配置して、マークアップからプレゼンテーションの一部を削除することもできます。例:
<a href='#' class="imglink">
There is
<em>no</em>
underlined whitespace at beginning of this text</a>
CSS:
.imglink {
min-height: 50px;
background: transparent url("http://www.cadcourse.com/winston/Images/SoccerBall.jpg") no-repeat;
background-size: 50px 50px;
display: block;
padding-left: 55px;
line-height: 50px
}
もちろん、この方法にはいくつかの弱点がありますが、他の制約によっては解決策になる可能性があります。
画像の後にスペースがあるため、これは予想される動作です: HTML 構造を変更する必要があります。代わりに次を使用してください:
<a href='#'>
<img src='SoccerBall.jpg'/> <span>Your text</span>
</a>
CSS :
a{text-decoration:none;}
a>span{text-decoration:underline;}
現在の内にある異なる要素に2つの別々のリンクを使用します。CSSの修正はまだ見ていません。明らかに、エリア全体がリンクと見なされているためです。この回避策は、当面から機能しています。
<a href='#'>
<img src='http://www.cadcourse.com/winston/Images/SoccerBall.jpg'
width='50' height='50'/>
</a>
<a href='#'>
No Underlined Whitespace
</a>
画像とテキストの間のアンカーのスペースを取り除きます (これは下線が引かれている部分です)。CSS で、img 'margin-right:10px' (または任意の値) を指定します。パディングを取り除きます。
編集
明確にするために：
画像の後にスペース文字を挿入することは、「コーディング スタイル」に該当しません。アンカーのテキスト値にスペースを明確にエンコードしています。
この点に関して、CSS は意図したとおりに動作しています。アンカーのテキスト コンテンツの動作をオーバーライドしていないため、アンカーのテキスト コンテンツ (スペースを含む) を下線でスタイリングしています。
コーディングスタイルを変更していないスペースを削除することで、コンテンツを変更しています. これにより、直面しているスタイリングの問題が解消されることがあります。
アンカー内のスペースを保持し、CSS でその文字をターゲットにする方法があるかどうかを尋ねていることは理解していますが、それを行う方法はないと思います。
スペースを削除しても、意味のある方法でコンテンツのセマンティクスを変更していないことを指摘しています（とにかくそれを非表示にしたいので、確かに視覚的にではありません。 、とにかくこの文脈では意味のある方法で間隔を伝えていません)。
実際、そのスペース文字の意図は、セマンティクス指向よりもプレゼンテーション指向であると思います。
プレゼンテーション目的で HTML を変更することは理想的ではありませんが、一般的には HTML 自体を変更することではなく、 HTMLで伝えている意味を変更することです。この場合、HTML を変更して同じ意味を伝えるのは完全に正しいと思います。
セマンティック ニーズとスタイル ニーズの両方に合わせてドキュメントを変更する場合があります。同じ意味と情報の論理的な流れを伝えている限り、コンテンツの消費者にとっては実際には問題になりません。
私は確かにあなたの質問に同意し、それはよく考えられており、非常に良い点をもたらしていると思います. このSO questionで参照されているように、 text-space-collapseと呼ばれる実験的な CSS3 プロパティがあり、discard, trim-inner, trim-before and trim-afterこの問題を解決するために使用できるすべての値が提案されています。
が実装されるまでに見つけようとしている最善の解決策はtext-space-collapse、マークアップを少し変更することだと思います。テキストをスパンでラップして、display: table1 つのソリューションとして使用できます。
a { display:table; }
a > * { display: table-cell; vertical-align: middle; }
<a href='#'>
<img src='http://www.cadcourse.com/winston/Images/SoccerBall.jpg' width='50' height='50'/>
There is underlined whitespace at beginning of this text
</a>
パディングの代わりに、マージンを試してください
img {
border: 1px solid #CCC;
margin: 10px;
vertical-align: middle;
}