改行を使用する場合のHTML要素間の空白の削除

約10 img秒の行があるページがあります。HTMLを読みやすくするために、それぞれの間に改行を入れたいimgタグのが、そうすると画像間に空白が表示されてしまいます。タグの間ではなく、タグの中央で中断する以外にできることはありますか？

編集：これは私がこれまでに持っているもののスクリーンショットです。PHPを使用して、本の背表紙の画像をランダムな組み合わせで表示してほしい。これが、個別のimgタグが必要な理由です。

CSSを使用できます。画像にdisplay：blockまたはfloat：leftを設定すると、独自の間隔を定義し、HTMLを好きなようにフォーマットできますが、レイアウトが適切かどうかに影響します。

それ以外の場合は、インラインコンテンツを処理するため、HTML形式は重要です-画像が単語のように効果的に機能するためです。

これが古い場合は申し訳ありませんが、解決策を見つけました。

font-sizeを0に設定してみてください。したがって、画像間の空白は幅が0になり、画像は影響を受けません。

これがすべてのブラウザで機能するかどうかはわかりませんが、Chromiumといくつかの<li>要素で試してみましたdisplay: inline-block;。

コメントを使用できます。

 <img src="..." alt="..."><!--
 --><img src="..." alt="..."><!--
 --><img src="..." alt="..."><!--
 --><img src="..." alt="...">

一連の画像を並べて表示することのセマンティクスについては心配です。

CSSでおおよそのことをしないで、2つのオプションがあります。最初のオプションは、JavaScriptを使用して空白のみの子をタグから削除することです。しかし、より良いオプションは、空白が意味を持たずにタグ内に存在できるという事実を使用することです。そのようです：

<div id="[divContainer_Id]"
    ><img src="[image1_url]" alt="img1"
    /><img src="[image2_url]" alt="img2"
    /><img src="[image3_url]" alt="img3"
    /><img src="[image4_url]" alt="img4"
    /><img src="[image5_url]" alt="img5"
    /><img src="[image6_url]" alt="img6"
/></div>

Flexboxはこの古い問題を簡単に修正できます。

.image-wrapper {
  display: flex;
}

flexboxの詳細：https ://css-tricks.com/snippets/css/a-guide-to-flexbox/

あまりにも多くの調査、試行錯誤の結果、うまく機能しているように見え、子要素のフォントサイズを手動で再設定する必要がない方法を見つけたので、ドキュメント全体で標準化されたemフォントサイズを使用できます。 。

Firefoxでは、これはかなり単純でword-spacing: -1em、親要素に設定するだけです。何らかの理由で、Chromeはこれを無視します（私がテストした限りでは、値に関係なく単語の間隔は無視されます）。これに加えletter-spacing: -.31emて、私は親とletter-spacing: normal子供に追加します。emのこの割合は、emサイズが標準化されている場合のみ、スペースのサイズです。。Firefoxは、文字間隔の負の値を無視するため、単語間隔に追加されません。

私はこれをFirefox 13（win / ubuntu、androidで14）、Google Chrome 20（win / ubuntu）、ICS 4.0.4とIE 9のAndroidブラウザーでテストしました。わからないけど...

こちらがデモですhttp://jsbin.com/acucam

手遅れですが（質問したところ、関連セクションで細いのを見つけました）、display：table-cell;と思います。より良い解決策です

<style>
img {display:table-cell;}
</style>

<img src="img1.gif">
<img src="img2.gif">
<img src="img3.gif">

唯一の問題は、IE 7以前のバージョンでは機能しないが、ハックで修正できることです。

この問題を解決するには、次のコードのようにCSSスタイルシートを使用します。

[divContainer_Id] img
{
    display:block;
    float:left;
    border:0;
}

代替テキストhttp://rabu4g.bay.livefilestore.com/y1pWoAOBMiLumd2iQTAreYjQCDIkHImh2g_b2g9k4AnxtDNrCjvzL6bK7skG8QKMRNWkMG7N8e5Xm7pgle3tdRJd2y08CapnnoPL

Firefox 3.5 Finalでのテスト！

PS。あなたのhtmlはこのようにする必要があります。

<div id="[divContainer_Id]">
    <img src="[image1_url]" alt="img1" />
    <img src="[image2_url]" alt="img2" />
    <img src="[image3_url]" alt="img3" />
    <img src="[image4_url]" alt="img4" />
    <img src="[image5_url]" alt="img5" />
    <img src="[image6_url]" alt="img6" />
</div>

タグの間ではなく、タグの中央で中断する以外にできることはありますか？

あんまり。<img>はインライン要素であるため、これらの要素間のスペースは、HTMLレンダラーによってテキスト内の真のスペースと見なされます。余分なスペース（および改行）は切り捨てられますが、テキストエレメントの文字データには単一のスペースが挿入されます。

位置決め<img>絶対にタグはこれを防ぐことができますが、これは多くの作業することができ、いくつかのピクセルメジャーに手動で各画像を配置する意味しますので、私はこれに対して助言するだろう。

別の解決策は、スペースの場所で型破りな改行を使用することです。これは最初のいくつかの回答に似ており、要素を並べる別の方法です。また、マークアップ内のスペースを改行で置き換えるため、超エッジ最適化手法でもあります。

<img
src="image1.jpg"><img
src="image2.jpg"><img
src="image3.jpg"><img
src="image4.jpg">

このコードにはスペースが含まれていないことに注意してください。HTMLで通常スペースが使用されている場所は、改行で置き換えられます。コメントを使用する場合や、Paul de Vriezeが推奨するような空白を使用する場合よりも、詳細度は低くなります。

このアプローチはtech.coの功績によるものです。

空白：初期; 私のために働く。

要素間の空白は、視覚的な書式設定の目的でHTMLエディターによってのみ配置されます。jQueryを使用して空白を削除できます。

$("div#MyImages").each(function () {

    var div = $(this);
    var children= div.children();
    children.detach();
    div.empty();
    div.append(children);

});

これにより、子要素が切り離され、子要素を再び追加する前に残っている空白がすべてクリアされます。

この質問に対する他の回答とは異なり、このメソッドを使用すると、継承されたcss displayとfont-size値が確実に維持されます。また、使用する必要がなくfloat、面倒clearです。もちろん、jQueryを使用する必要があります。

個人的には、これを行う正確な方法はなく、何らかの形のトリックを使用しない限り、受け入れられた回答が好きです。

私にとって、これは時々厄介な問題であり、たとえば、チェックボックスの行がすべて正しく配置されていない理由を疑問に思って1時間無駄にすることがあります。私は覚えていません...しかし、そうではありません:(

次に良い答えは、font-sizeを使用することです...私にとってこれは厄介なハックであり、なぜテキストが表示されないのか疑問に思うかもしれません。

私は通常、PHPで多くのことを開発しており、チェックボックスのグリッドを生成する場合、PHPで生成されたコンテンツは間隔や改行を挿入しないため、この問題を取り除きます。

単に、すべてを1行にまとめた画像を処理するか、サーバー側のスクリプトを使用してコンテンツ/画像を生成することをお勧めします。

要素間のCR / LFを削除するために使用するのではなく、SGML処理命令を使用します。これは、縮小記号がコメントを削除することが多いためです。XMLPIは削除されません。PHP PIがPHPによって処理される場合、その間にCR / LFとともにPIを完全に削除するという追加の利点があり、少なくとも8バイトを節約できます。などの任意の有効な命令名を使用して、2バイトをX（HT）MLに保存できます。

Quentinの回答に触発されて、次のタグの開始の横に終了>を配置することもできます。

 <img src="..." alt="..."
 /><img src="..." alt="..."
 /><img src="..." alt="..."
 /><img src="..." alt="..."/>

意味論的に言えば、順序付きまたは順序なしのリストを使用して、CSSを使用して適切にスタイルを設定するのが最善ではないでしょうか。

<ul id="[UL_ID]">
    <li><img src="[image1_url]" alt="img1" /></li>
    <li><img src="[image2_url]" alt="img2" /></li>
    <li><img src="[image3_url]" alt="img3" /></li>
    <li><img src="[image4_url]" alt="img4" /></li>
    <li><img src="[image5_url]" alt="img5" /></li>
    <li><img src="[image6_url]" alt="img6" /></li>
</ul>

CSSを使用すると、これを好きなようにスタイル設定して、本の間にある空白を削除できます。