web-dev-qa-db-ja.com

HTMLの空白を無視する

HTML/CSSに、空白を完全に無視するようブラウザに指示するものはありますか？

たとえば、2つの画像を隣り合わせに配置したい場合は何度も-HTMLを読みやすくするために必死に努力しますが、ブラウザはそれらの間にスペースを入れます。

したがって、このようなものの代わりに：

<img src="images/minithing.jpg" alt="my mini thing" />
<img src="images/minithing.jpg" alt="my mini thing" />
<img src="images/minithing.jpg" alt="my mini thing" />
<img src="images/minithing.jpg" alt="my mini thing" />

あなたはこれで終わる

<img src="images/minithing.jpg" alt="my mini thing" /><img src="images/minithing.jpg" alt="my mini thing" /><img src="images/minithing.jpg" alt="my mini thing" /><img src="images/minithing.jpg" alt="my mini thing" />

これは本当に恐ろしいことです！

htmlcsswhitespace
226
Paul

ああ、 CSSの1行 で簡単に達成できます：

#parent_of_imgs { white-space-collapse: discard; }

欠点は、あなたが尋ねる？ これを実装したブラウザはまだありません非常に便利な機能（インラインブロック全般を考えてみてください）。 :-(

夜は暗いので見苦しいですが、コメントを使用することが時々ありました。

<p><!--
  --><img src="." alt="" /><!--
  --><img src="." alt="" /><!--
  --><img src="." alt="" /><!--
  --><img src="." alt="" /><!--
--></p>
202
Boldewyn

コンテナのfont-sizeを0に設定すると、white-spaceが消えます！

114
Umesh

ブラウザは、ブロック要素の隣にあるほとんどの場合、空白を無視します。

画像（この場合）の問題は、それらがインライン要素であるということです。したがって、別々の行にそれらを書き込む間、それらは実際にはそれらの間にスペースを含む同じ行の要素です（改行はスペースとしてカウントします）。ブラウザが画像間のスペースを削除するのは正しくありません。画像タグの間に改行を入れて書き込むことは、同じ行にスペースを入れて画像タグを書き込むのと同じ方法で処理する必要があります。

CSSを使用して画像をブロック要素にし、それらを互いに浮かせることができます。これにより、画像間のスペースと画像の下のテキスト行のスペースの両方の間隔に関する多くの問題が解決します。

47
Guffa

残念ながら、改行はスペース文字としてカウントされます。

私が思いついた最善の解決策は、タグの外側ではなく、タグ自体の内側の空白を使用することです：

  <img src="images/minithing.jpg" alt="my mini thing" 
/><img src="images/minithing.jpg" alt="my mini thing"
/><img src="images/minithing.jpg" alt="my mini thing"
/><img src="images/minithing.jpg" alt="my mini thing" />

それも理想的ではありません、私は知っています。しかし、少なくとも、スペース文字がレンダリングされるサイズに依存したり、相対的な配置やJavaScriptに頼ったりする奇妙なCSSハックではありません:)

37
Jon Grant

これに対する最新の解決策は、外部コンテナでdisplay: flexを使用することです。次の例でこれを試すことができます。

Codepen→ （

（そして、はい、Flexboxは広くサポートされています： http://caniuse.com/#search=flexbox ）

HTML：

<!-- Disregard spaces between inline-block elements? -->
<div class="box">
  <span></span>
  <span></span>
  <span></span>
</div>

CSS

.box {
  display: flex;
  display: -webkit-flex;    
}

span {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: #fcf;
  border: 2px solid #f9f;
}

更新：また、アイテムをラップしたい場合（標準のインラインブロック要素のように）、flex-wrap: wrapを追加することを忘れないでくださいflexboxコンテナに。

25
ted451
<style>
  img {
     display: table-cell
  }
</style>
<img src="images/minithing.jpg" alt="my mini thing" />...

幸運なことに、これはwebkit（具体的にはQTに埋め込まれたもの）で機能するようになるので、ChromeとSafariでも機能するので、心配するだけです。 display: table-cellにはディスプレイのすべての利点があります：inline-block、ただし空白の欠点はありません（インデントされたtdを考えてください）

18
A2D

このソリューションの何がそんなに難しかったですか？

css

.no-whitespace {
    line-height: 0;
    font-size: 0;
}

html

<span class="no-whitespace">

    <a href=# title='image 1'>
       <img src='/img/img1.jpg' alt='img1'/>
    </a>

    <a href=# title='image 2'>
       <img src='/img/img2.jpg' alt='img2'/>
    </a>

    <a href=# title='image 3'>
       <img src='/img/img3.jpg' alt='img3'/>
    </a>

</span>
16
Ozzy

画像はデフォルトのインライン要素ごとにあるため、それらの間に空白が表示されます。スクリーンリーダーで例を聞くと、その理由がすぐにわかります。空白がないと、次のように聞こえます。

私のミニの事私のミニの事私のミニの事私のミニの事

そのため、my mini thing.（最後にドットと空白）を代替テキストとして使用するか、CSSで画像をプッシュします。コード内の空白を削除しないでください。

6
fuxia

phpを使用している場合、これは素晴らしく機能します。私は解決策を見つけました こちら 。

私はもともと、simplexmlのようなものでhtmlを解析した後にwhitespaceのみで構成されるテキストノードを削除するものを探していましたが、安い。

<?ob_start(function($html) {return preg_replace('/>\s+</','><',$html);});?>
    <img src='./mlp.png'/>
    <img src='./dbz.png'/>
    <img src='./b10af.png'/>
    <img src='./fma.png'/>
<?ob_end_flush;?>
3
Chinoto Vokro

これは単純な質問であり、答えはそれほど単純ではありません。

CMSで常に達成できるとは限らないソースコード内のスペースは、システムによって自動的に挿入されるため、回避しようとすることができます。これを変更する場合は、CMSのコアコードを深く掘り下げる必要があります。

その後、左のフロート画像を使用してみてください。しかし、これは危険です。最初は、定義によって垂直方向の配置を実際に制御することはできません。第二に、非常に多くの浮動要素があり、それらが複数の行にまたがっている場合、完全な混乱に陥ります。また、左のフローティング要素に依存するレイアウトがある場合（今日のほとんどはそうです）、画像の後にフローティングをクリアすると、外側のフローティングスタイルを壊すことさえできます。周囲の要素をフロートさせる場合、これはオーバーライドできます。推奨されるものではありません。

したがって、唯一の解決策は、空白処理のプロセスを処理するCSS宣言です。これは標準の一部ではありません（CSS 3はまだ完成していないため）。

私は、HTMLバリアントに空白がないことを好みます。 drupalをCMSとして使用すると、template.phpおよびテーマファイルでこれをかなり簡単に実現できます。次に、インラインブロックを選択します。

追伸：インラインブロックは、さまざまなブラウザで取得するのはかなり複雑です。 FF 2の場合、ディスプレイが必要です：-moz-inline-box。残りとIE8はdisplay：inline-blockを直後に持つことができます。また、lte IE 7の場合は、次の個別の宣言でインライン表示する必要があります（条件付きコメントが望ましい）。

編集

要素をインラインブロックにするために使用するもの

elem.inline {
  display: -moz-inline-box; /* FF2 */ 
  display: inline-block; /* gives hasLayout in IE 6+7*/
}
/* * html hack for IE 6 */
* html elem.inline {
  display: inline; /* elements with hasLayout and display inline behave like inline-block */
}
/* * +  html hack for IE 7 */
* + html elem.inline {
  display: inline; /* elements with hasLayout and display inline behave like inline-block */
}
2
yunzen

このCSSを試してください：

img { display: table-cell; }
1
Djidel

HTMLを最小限に抑える！

応答を縮小することをお勧めしますbeforeそれはブラウザにレンダリングされます。

したがって、スペースが必要な場合（および&nbsp;を使用してハードコーディングした場合）を除き、縮小プロセスでは常にスペースを削除します。

0
Fitzchak Yitzchaki