Web ページに小さなスペースが表示され続けるのはなぜですか?

StackOverflow https://stackoverflow.com/questions/134683

  •  02-07-2019
  •  | 
  •  

質問

これは愚かな質問かもしれませんが、これを行うためのより良い、または適切な方法がある場合は、ぜひ学びたいと思っています。

最近も含めて、HTML ページのレンダリングされたバージョンに小さなスペースが表示されるという問題に何度か遭遇しました。直観的には、テキストやエンティティ以外ではページの HTML の書式設定は重要ではないため、これらは存在すべきではないと思いますが、どうやら重要であるようです。

私が言いたいのはこれです - クライアントからサイトをどのように見せたいかについての Photoshop ファイルがあります。彼らは、このファイルの画像に対して基本的にピクセル完璧に見えるようにしたいと考えています。

ページ内の場所の 1 つはメニュー バーを必要とし、それぞれがホバリング時にビットを変更したり、ハイパーリンクのように機能したりします。Photoshop ファイルでは、これは 1 つの長いバーであるため、これを行うための安価で簡単な方法は、そのセグメントを複数の画像に分割し、ファイル内で互いに並べて配置することです。

なので、本能的にこのようにレイアウトしてみました（他にもありますが、これが要点です）

<a href="page1.html">
  <img src="image1.png" />
</a>
<a href="page2.html">
  <img src="image2.png" />
</a>
<a href="page3.html">
  <img src="image3.png" />
</a>

など。

問題は、画像間にこの小さなスペースがあることです。クライアントはこれをピクセル完璧にしたいので、これは受け入れられません（そして、見た目が悪いだけです）。

適切にレンダリングするための 1 つの方法は、画像間の改行を削除することです。

<a href="page1.html">
  <img src="image1.png" />
</a>
<a href="page2.html">
  <img src="image2.png" />
</a>
<a href="page3.html">
  <img src="image3.png" />
</a>

これにより、画像が互いに向かい合うようになります (望ましい効果) が、行が信じられないほど長くなり、コードの保守がより困難になります (ここでは SO でラップされており、これは簡略化されたバージョンです。実際のバージョンではファイル名と JavaScript が長くなります)ホバリングを行うために散りばめられています）。

これは起こるべきではないと私には思えますが、HTML 内のキャリッジ リターンが小さな空白としてレンダリングされているように見えます。そして、これはすべてのブラウザで発生するようです。

上記の 2 つのスニペットが同じように表示されるはずだと考えるのは正しいのでしょうか、それとも間違っているのでしょうか?そして、私が何か間違ったことをしているのでしょうか？間違ったエンコーディングでファイルを保存したのではないでしょうか?代わりに、これらのリンクをすべて完璧に配置された CSS 要素にする必要がありますか?

役に立ちましたか？

解決

通常、空白 (復帰を含む) はすべてのブラウザでスペースとして表示されます。

要素を次々に配置する必要がありますが、次のようなトリックを使用できます。

<a href="page1.html"><img src="image1.png" 
/></a><a href="page2.html"><img src="image2.png" 
/></a><a href="page3.html"><img src="image3.png" 
/></a>

これも少し見苦しくなりますが、それでも 1 行よりはマシです。書式設定を変更することもできますが、考え方としては、要素間ではなく要素内に改行を追加することです。

他のヒント

これがあなたのページにとって十分一般的であるかどうかはわかりませんが、これらを特定のものに分類することはできます ある タグを付けてすべてを左にフローティングすると、HTML の形式に関係なく、それらが一緒に束ねられます。 

<style>
    a.together {
        float:left;
    }
</style>

<a class='together' href="page1.html"><img src="image1.png" /></a>
<a class='together' href="page2.html"><img src="image2.png" /></a>
<a class='together' href="page3.html"><img src="image3.png" /></a>

これは HTML 仕様の一部です。スペースはマークアップに含まれるため、ドキュメントの一部とみなされます。

書式設定が気に入らないため、他の唯一のオプションは HTML タグを分割することです。

  <a href="..."><img src=".." /></a
  ><a href="..."><img src=".." /></a
  ><a href="..."><img src=".." /></a

私の意見では、これは望ましくありません。そうでない場合は、JavaScript 経由、またはテンプレート システムと動的 HTML を使用して、HTML を動的に作成します。

理由は簡単です。HTML では空白が重要ですが、それは 1 回だけです。繰り返される空白は無視され、最初の空白のみが表示されます。

これを回避する唯一の信頼できる方法は、あなたがやったように、要素の間に空白を入れないことです。

テーブルベースのレイアウトが現在よりも少ない場合は、ボーダーゼロ、パディングゼロのテーブルを使用して、要素をソース コード内の別々の行に配置しながら要素を整列させることができます。

これを処理する方法は、順序なしリストを使用し、各画像/リンクをアイテムにすることです。次に、CSS を使用して各項目をインラインで表示し、左側にフローティングします。

これにより、柔軟性が大幅に向上し、マークアップが非常に読みやすくなります。

ブラウザはキャリッジ リターンをスペースとして扱うため、上で示した動作は当てはまります。これを修正するには、次のようにスタイルを設定します。

a { display: block; float: left; }

上記のルールはすべてのリンクに適用されるため、セレクターを特定の要素のみに絞り込むことをお勧めします。

#nav a { display: block; float: left; }

Web サイトにタブ付きインターフェイスを実装する場合は、細心の注意を払って適切に実装する価値があります。CSS タブの実装の優れた例を掲載している Web サイトは数多くあります。そのうちの 1 つを使用することを検討してください。

これです CSS+Javascript/AJAX タブがたくさんあります。または参照してください この単純な CSS サンプルのセット （一部のスタイル）。最後に、これをチェックしてください。実際にはかなりクールです。 タブジェネレーター.

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top