web-dev-qa-db-ja.com

アンカータグ要素間のCSSの不要な間隔

私はこのスタイルシートを持っています：

*{
    padding: 0px;
    margin: 0px;
}

a{

  background:yellow;

}

そしてこのウェブページ：

<a href="/blog/">Home</a>
<a href="/about/">About</a>
<a href="/contact/">Contact</a>

結果：

enter image description here

それらのアンカータグを互いに「接触」させ、その間の不要なスペースを削除するにはどうすればよいですか？

ルカに感謝

htmlcssanchormargin
27
luca

タグ間の空白（この場合は改行）を削除する必要があります。一部のブラウザーは、それをスペースとしてレンダリングします。

32
Alex Feinman

このトリックを使用してスペースを取り除くことができます：

HTML：

<div id="test">
    <a href="/blog/">Home</a>
    <a href="/about/">About</a>
    <a href="/contact/">Contact</a>   
</div>

CSS：

#test { font-size:0; }
#test a { font-size:16px; background:yellow; }

ライブデモ：http://jsfiddle.net/quucy/

29
Šime Vidas

私はそれを解決するかなりクールな方法を見つけるかもしれないと思います:-)。 <!-- comments -->を使用して空の< span >sなどを埋めるという事実から始めました。

したがって、新しい行のアンカー構造を維持し、それらの間にスペースを入れたくない場合は、単に行の最後でブロックコメントを開き、新しい< anchor >の直前の新しい行でそれを終了します。

このような：

<div id="test">
    <a href="/blog/">Home</a><!--
    --><a href="/about/">About</a><!--
    --><a href="/contact/">Contact</a>   
</div>

とデモ： http://jsfiddle.net/Lukis/reZG2/1/

15
Lukáš Řádek

リンク間のスペースは、コードにある改行文字によって生成される場合がありますが、実際には、この動作をどのブラウザーで実行するかによって異なります（一部のブラウザーではこれらの文字を無視し、一部では無視しません）。

3つのタグすべてを1行に配置し、間にスペースを入れないでください。

<a href="/blog/">Home</a><a href="/about/">About</a><a href="/contact/">Contact</a>
4
brezanac

それらをul/li構造にするのはどうですか？

#test li {
    background:yellow; 
    float: left;
    list-style: none;
}
<ul id="test">
  <li><a href="/blog/">Home</a></li>
  <li><a href="/about/">About</a></li>
  <li><a href="/contact/">Contact</a></li>
</ul>
3
J.T. Houtenbos

上記のすべての回答は、不要な空白を取り除くためのいくつかのきちんとした方法を示していますが、私が10年近く使用しているものはわかりません。だからここにまだ空白に取り組んでいる人々のためのあなたの非常に古い問題に対する別の簡単な解決策があります-floatを使用してください！

HTML:

<div id="test">
  <a href="/blog/">Home</a>
  <a href="/about/">About</a>
  <a href="/contact/">Contact</a>   
</div>

CSS:

#test { 
  overflow:hidden; 
 /* this isn't really required here but helps; 
 or use your preferred method for clearfix  */
}

#test a { 
  float:left; 
  background: yellow;
}

jsfiddle:http://jsfiddle.net/fjj7dsyx/2/

2
lost-and-found