インライン/インラインブロック要素間のスペースを削除するにはどうすればよいですか?


1068

このHTMLとCSSを考えると:

span {
    display:inline-block;
    width:100px;
    background-color:palevioletred;
}
<p>
    <span> Foo </span>
    <span> Bar </span>
</p>

その結果、SPAN要素間には4ピクセル幅のスペースができます。

デモ: http : //jsfiddle.net/dGHFV/

これが発生する理由を理解しています。また、次のように、HTMLソースコードのSPAN要素間の空白を削除することで、そのスペースを取り除くことができることも知っています。

<p>
    <span> Foo </span><span> Bar </span>
</p>

ただし、HTMLソースコードを改ざんする必要がないCSSソリューションを望んでいました。

これをJavaScriptで解決する方法を知っています-次のように、コンテナー要素(段落)からテキストノードを削除します。

// jQuery
$('p').contents().filter(function() { return this.nodeType === 3; }).remove();

デモ: http : //jsfiddle.net/dGHFV/1/

しかし、この問題はCSSだけで解決できますか?


今関連するオプションのフルセットのために、この質問に私の答えを参照してください:stackoverflow.com/questions/14630061/...
ktamlyn


回答:


1006

この回答はかなり人気になっているので、大幅に書き直しています。

尋ねられた実際の質問を忘れないでください:

インラインブロック要素間のスペースを削除するにはどうすればよいですか?HTMLソースコードを改ざんする必要がないCSSソリューションを望んでいました。この問題はCSSだけで解決できますか?

CSSだけでこの問題を解決すること可能ですが、完全に堅牢なCSSの修正はありません。

私の最初の答えで私が持っていた解決策はfont-size: 0、親要素に追加してからfont-size、子供に賢明を宣言することでした。

http://jsfiddle.net/thirtydot/dGHFV/1361/

これは、すべての最新ブラウザーの最近のバージョンで機能します。IE8で動作します。Safari 5では機能しませんが、Safari 6 では機能します。Safari5はほとんど機能しないブラウザーです(0.33%、2015年8月))。

相対フォントサイズで発生する可能性のある問題のほとんどは、修正が複雑ではありません。

ただし、CSSのみの修正が特に必要な場合はこれが合理的な解決策ですが、HTMLを自由に変更できる場合は推奨されません(ほとんどの人がそうです)。


これは、私がかなり経験豊富なWeb開発者として、実際にこの問題を解決するために行うことです。

<p>
    <span>Foo</span><span>Bar</span>
</p>

はい、そうです。インラインブロック要素間のHTMLの空白を削除します。

それは簡単です。それは簡単です。それはどこでも動作します。それは実用的なソリューションです。

空白がどこから来るのかを慎重に検討する必要がある場合があります。JavaScriptで別の要素を追加すると空白が追加されますか?いいえ、あなたがそれを適切に行っていれば違います。

新しいHTMLを使用して、空白を削除するさまざまな方法の魔法の旅に出ましょう。

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
  • 私が通常行うように、これを行うことができます:

    <ul>
        <li>Item 1</li><li>Item 2</li><li>Item 3</li>
    </ul>

    http://jsfiddle.net/thirtydot/dGHFV/1362/

  • または、これ:

    <ul>
        <li>Item 1</li
        ><li>Item 2</li
        ><li>Item 3</li>
    </ul>
  • または、コメントを使用します。

    <ul>
        <li>Item 1</li><!--
        --><li>Item 2</li><!--
        --><li>Item 3</li>
    </ul>
  • または、PHPなどを使用している場合:

    <ul>
        <li>Item 1</li><?
        ?><li>Item 2</li><?
        ?><li>Item 3</li>
    </ul>
  • または、特定の終了タグを完全にスキップすることできます(すべてのブラウザーでこれで問題ありません)。

    <ul>
        <li>Item 1
        <li>Item 2
        <li>Item 3
    </ul>

「空白を削除する1000通りの方法、30ドットで」私があなたを死ぬほど退屈させた今、うまくいけば、あなたはすべてのことを忘れてしまったでしょうfont-size: 0


また、あなたは今、フレキシボックスを使用することができます:あなたが以前のインライン・ブロックを使用している可能性があることをレイアウトの多くを達成するためにhttps://css-tricks.com/snippets/css/a-guide-to-flexbox/


7
FF3.6、IE9RC、O11、Ch9で動作します。しかし、そこのSafari 5にはまだ1ピクセルワイドギャップのまま:(
サイムVIDAS

7
@thirtydot この回答のコメントをチェックしてください。それは、このことが考えられfont-size:0...トリックは、すべての後にこのような良いアイデアではありません
サイムVIDAS

25
私はポスターがCSSソリューションを探していることを知っていますが、これははるかに多くの票を投じている(これは30票vs私がこれを書いているときは5票です)-強力な副作用があり、クロスブラウザーでも機能しません。この時点では、HTML内の問題のある空白を単に削除するほうが実用的です。
Steph Thirion、

10
このソリューションは、コンテナーサイズのEMを使用しない場合にのみ機能します
meo

6
これにより、相対フォントサイズで子要素が壊れます。
Daniel

156

CSS3準拠のブラウザには white-space-collapsing:discard

参照:http : //www.w3.org/TR/2010/WD-css3-text-20101005/#white-space-collapsing


trim-inner代わりに使用したくないですdiscardか?
spb 2013

49
これはテキストレベル3から削除されましたが、テキストレベル4にはあります。まだ2016年ですが、まだサポートされていません。text-space-collapse:discard
Oriol

1
@MrLister:他のソリューションはすべてのケースで機能するわけではありません。たとえば<p>A long text...</p>、開始タグと終了タグがテキストコンテンツとは別の行にある場合、末尾のスペースがから削除される解決策については知りません。これは、HTMLファイルを整理して読みやすくするために常に行うことです。
Robert Kusznier

@ロバートfloat
リスター氏、

@MrLister Floatingは、実際に末尾のスペースを削除しますが、重大な副作用があります-コンテナのレイアウトにおける要素の位置を完全に変更します。要素をフローティングするとレイアウトが破壊される場合(通常はそうです)、どうすればよいですか?
Robert Kusznier

94

編集:

今日は、Flexboxを使用する必要があります。


古い答え:

わかりました。私はfont-size: 0;との両方のnot implemented CSS3 feature回答に賛成していますが、試してみたところ、どちらも実際の解決策ではないことがわかりました。

実際には、強力な副作用のない回避策は1つもありません。

その後 inline-blockHTMLソース(JSP)からdivの間のスペースを削除することにしました(これはこの引数に関するものです)。

<div class="inlineBlock">
    I'm an inline-block div
</div>
<div class="inlineBlock">
    I'm an inline-block div
</div>

これに

<div class="inlineBlock">
    I'm an inline-block div
</div><div class="inlineBlock">
    I'm an inline-block div
</div>

それは醜いですが、機能しています。

しかし、ちょっと待って...もし内部にdivを生成しているとしたら Taglibs loopsStruts2JSTLなど)?

例えば:

<s:iterator begin="0" end="6" status="ctrDay">
    <br/>
    <s:iterator begin="0" end="23" status="ctrHour">
        <s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}">
            <div class="inlineBlock>
                I'm an inline-block div in a matrix 
                (Do something here with the pushed object...)
           </div>
       </s:push>
    </s:iterator>
</s:iterator>

それらすべてをインライン化することは絶対に考えられません、それは意味するでしょう

<s:iterator begin="0" end="6" status="ctrDay">
    <br/>
    <s:iterator begin="0" end="23" status="ctrHour"><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><div class="inlineBlock>
                I'm an inline-block div in a matrix             
                (Do something here with the pushed object...)
           </div></s:push></s:iterator>
</s:iterator>

それは読みにくく、管理や理解が難しいなどです...

私が見つけた解決策:

HTMLコメントを使用して、1つのdivの終わりを次のdivの始まりに接続します!

<s:iterator begin="0" end="6" status="ctrDay">
   <br/>
   <s:iterator begin="0" end="23" status="ctrHour"><!--
    --><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><!--
        --><div class="inlineBlock>
                I'm an inline-block div in a matrix             
                (Do something here with the pushed object...)
           </div><!--
    --></s:push><!--
--></s:iterator>
</s:iterator>

このようにして、読みやすく、正しくインデントされたコードを作成します。

そして、プラスの副作用として、 HTML source空のコメントがはびこっていますが、結果は正しくインデントされます。

最初の例を見てみましょう。私の控えめな意見では、これは:

    <div class="inlineBlock">
        I'm an inline-block div
    </div><!--
 --><div class="inlineBlock">
        I'm an inline-block div
    </div>

これより良いです:

    <div class="inlineBlock">
         I'm an inline-block div
    </div><div class="inlineBlock">
         I'm an inline-block div
    </div>

1
これにより、エディターのコード折りたたみ機能が壊れることもあります。
jknotek 2018年

44

空白を入れないように要素間にコメントを追加します。私にとっては、フォントサイズをゼロにリセットしてから元に戻すよりも簡単です。

<div>
    Element 1
</div><!--
--><div>
    Element 2
</div>

これは、2020年に使用すべきではないハックです。代わりにflexboxを
#

答えは2013年に書かれました。そしてflexboxは質問に対する答えではありませんが、これもまたうまくいきません:stackoverflow.com/a/37512227/1019850
David

42

すべてのスペース除去技術display:inline-blockは厄介なハックです...

フレックスボックスを使用する

それは素晴らしく、このすべてのインラインブロックレイアウトbsを解決し、2017年の時点で98%のブラウザーをサポートしています(古いIEを気にしない場合はさらに多く)。


1
厄介なハックかもしれませんが、font-size:0は100%のブラウザーで機能し、displayを適用します。inline-flexは、それをサポートするブラウザーであっても、余計な空白を取り除きません!
Patrick

@patrick Flexboxは間違いなく問題を解決します。inline-flexは、フレックスアイテムをインラインで表示することを意図したものではなく、コンテナーにのみ適用されます。stackoverflow.com/a/27459133/165673を
Yarin

7
「font-size:0」 100%ブラウザーで機能しません。(最小フォントサイズのブラウザー設定)。そして、この答えは本当に良いです。
ViliusL 2018

35

display: flex;親要素に追加します。これが接頭辞付きのソリューションです:

簡略版version

p {
  display: flex;
}

span {
  width: 100px;
  background: tomato;
  font-size: 30px;
  color: white;
  text-align: center;
}
<p>
  <span> Foo </span>
  <span> Bar </span>
</p>


接頭辞Fixで修正

p {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
span {
  float: left;
  display: inline-block;
  width: 100px;
  background: blue;
  font-size: 30px;
  color: white;
  text-align: center;
}
<p>
  <span> Foo </span>
  <span> Bar </span>
</p>


1
それは素晴らしい答えです!けれども、簡略化されたバージョンを上に配置するのはきちんとしていると思うので、読者が最初に目にするものです。または、単純化されていないバージョンを削除することもできます。
Stefnotch

1
:-)あなたの貴重な提案のために行わ✅感謝を@Stefnotch
ミズーリ州

31

これは、私が関連に渡したのと同じ答えです:ディスプレイ:インラインブロック-そのスペースは何ですか?

インラインブロックから空白を削除するための実際には非常に簡単な方法があり、簡単でセマンティックです。これは、幅がゼロのカスタムフォントと呼ばれ、非常に小さなフォントを使用して、フォントレベルで空白(個別の行にある場合にインライン要素用にブラウザーによって追加されます)を折りたたむことができます。フォントを宣言したらfont-family、コンテナのを変更し、子で再び変更するだけです。このような:

@font-face{ 
    font-family: 'NoSpace';
    src: url('../Fonts/zerowidthspaces.eot');
    src: url('../Fonts/zerowidthspaces.eot?#iefix') format('embedded-opentype'),
         url('../Fonts/zerowidthspaces.woff') format('woff'),
         url('../Fonts/zerowidthspaces.ttf') format('truetype'),
         url('../Fonts/zerowidthspaces.svg#NoSpace') format('svg');
}

body {
    font-face: 'OpenSans', sans-serif;
}

.inline-container {
    font-face: 'NoSpace';
}

.inline-container > * {
    display: inline-block;
    font-face: 'OpenSans', sans-serif;
}

味に合わせて。これは、私がfont-forgeでクックアップしてFontSquirrel webfontジェネレーターで変換したフォントのダウンロードです。5分全部かけてくれました。CSS @font-face宣言が含まれています:圧縮されたゼロ幅スペースフォント。これはGoogleドライブにあるため、[ファイル]> [ダウンロード]をクリックしてコンピューターに保存する必要があります。宣言をメインのcssファイルにコピーする場合は、おそらくフォントパスも変更する必要があります。


1
私はあなたがこれをCSS Tricksに投稿するのを見ました、そして私にとってこれは素晴らしい答えです それは軽量で、実装が簡単で、クロスブラウザです(私のテストが示している限り)。私はFirefoxがflex-wrap少なくともv28(srsly?)までサポートしないことに気づくまでフレックスボックスを使い始めましたが、これはそれまでの完全なフォールバックです。
indextwo 2014年

16
久々に見た最悪のオーバーキルです。スペースを削除するためだけにフォント全体をダウンロードしますか?もう。
Mr Lister 2015年

3
@MrListerあなたはそのようなフォントファイルが小さなものであることを知っていますか?中のグリフはありません。とにかく、base64でエンコードされたものを含めると、リクエストも削除できると主張します。
Robert Koritnik

これには、アイコンフォントと同じ致命的な欠陥があります。つまり、Webフォントがブロックされる(帯域幅やセキュリティの理由など)か、カスタムフォントで上書きされる(失読症などの健康上の原因が原因)場合には機能しません。
tomasz86

22

CSSテキストモジュールレベル3に基づくさらに2つのオプション(white-space-collapsing:discard仕様ドラフトから削除されたものではありません):

  • word-spacing: -100%;

理論的には、必要なことを正確に実行する必要があります。「単語」間の空白を、スペース文字の幅の100%だけ、つまりゼロまで短くします。しかし、残念ながらどこでも機能しないようで、この機能は「リスクあり」とマークされています(仕様から削除されることもあります)。

  • word-spacing: -1ch;

単語間のスペースを数字の「0」の幅だけ短くします。等幅フォントでは、スペース文字(およびその他の文字)の幅と正確に等しくなければなりません。これはFirefox 10以降、Chrome 27以降で動作し、ほとんどの場合Internet Explorer 9以降で動作します。

フィドル


単語間隔の+1。-0.5chは適切な値ですが、スペースのない-1chテキストは読み取りできません。-0.5chはfont-size:0と同じように動作します。テキスト要素での明示的な設定サイズ。:)
Dennis98 2015年

6
@ Dennis98、-1chは、等幅フォント(Courier Newなど)でのみ機能します。これは、' 'およびを含め、すべての文字の幅が同じであるため'0'です。非等幅フォントでは、幅' ''0'文字の間に適切な魔法の比率 chはありません。そのため、あまり役に立ちません。
Ilya Streltsyn 2015年

の代わりにword-spacing私の回答にletter-spacing示され
S.Serpooshan

20

残念ながら、それは2019年であり、 white-space-collapseあり、まだ実装されていません。

それまでの間、親要素font-size: 0;を指定font-sizeし、子にを設定します。これでうまくいくはずです


16

フレックスボックスを使用して、古いブラウザに対して(上記の提案から)フォールバックを実行します。

ul {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

13

シンプル:

item {
  display: inline-block;
  margin-right: -0.25em;
}

親要素に触れる必要はありません。

ここでの条件のみ:アイテムのfont-sizeを定義してはなりません(親のfont-sizeと同じでなければなりません)。

0.25em デフォルトです word-spacing

W3Schools-単語間隔プロパティ


0.25emは「デフォルトの単語間隔」ではありません。これは、一部の一般的なOSのデフォルトフォントである、Times New Romanフォントの空白文字の幅です。Helveticaのような他の人気のあるフォントは多くの場合、より広い空白文字を持っているため、それらから0.25emを削除するだけではギャップを取り除くには不十分です。
Ilya Streltsyn

12

font-size:0; 管理が少し難しいかもしれません...

次の2行は、他のどの方法よりもはるかに優れており、再利用可能で、時間を節約できると思います。私は個人的にこれを使用します:

.inline-block-wrapper>.inline-block-wrapper,
.inline-block-wrapper{letter-spacing: -4px;}
.inline-block-wrapper>*{letter-spacing: 0;display: inline-block;}

/* OR better shorter name...*/
.items>.items,
.items{letter-spacing: -4px;}
.items>*{letter-spacing: 0;display: inline-block;}

その後、次のように使用できます...

<ul class="items">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>

私の知る限り(私は間違っているかもしれません)、すべてのブラウザがこの方法をサポートしています。

説明

これは、期待どおりに機能します(おそらく-3pxの方が良いかもしれません)。

  • あなたはコードをコピーして貼り付けます(一度)
  • 次に、html class="items"で各インラインブロックの親を使用します。

新しいインラインブロック用に、CSSに戻って別のCSSルールを追加する必要はありません。

2つの問題を同時に解決します。

また、>(大なり記号)は、* /すべての子がインラインブロックであることを意味することに注意してください。

http://jsfiddle.net/fD5u3/

注:ラッパーに子ラッパーがある場合、文字間隔を継承するように変更しました。


代わりの-4pxためのletter-spacing大きなフォント・サイズのためにこれは十分ではないかもしれこのフィドルを参照してください。例えば、私たちはのように大きな値を使用することができます私のポスト
S.Serpooshan

12

ただし、技術的には「インラインブロック要素間のスペースを削除するにはどうすればよいですか?」

フレックスボックスソリューションを試して、以下のコードを適用すると、スペースが削除されます。

p {
   display: flex;
   flex-direction: row;
}

詳細については、次のリンクをご覧くださいhttps : //css-tricks.com/snippets/css/a-guide-to-flexbox/


一方で技術的に「私はインラインブロックでこれを行うことができます」と答えていない、これは...エレガントな解決策になると私には思える
ルーカス

10

2つの青いスパンをギャップなしで作成したいのか、それとも他の空白を処理したいのかはわかりませんが、ギャップを削除したい場合は、次のようにします。

span {
    display: inline-block;
    width: 100px;
    background: blue;
    font-size: 30px;
    color: white;
    text-align: center;

    float: left;
}

そして完了。


9

通常、このような要素を別の行でdisplay:inline-block使用しますが、同じ行でタグを使用する場合、スペースは削除されますが、別の行では削除されません。

別の行にタグがある例:

p span {
  display: inline-block;
  background: red;
}
<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

同じ行にタグがある例

p span {
  display: inline-block;
  background: red;
}
<p>
  <span> Foo </span><span> Bar </span>
</p>


別の効率的な方法はfont-size:0、親要素を使用し、font-size必要に応じて子要素に与えるCSSジョブです。

p {
  font-size: 0;
}
p span {
  display: inline-block;
  background: red;
  font-size: 14px;
}
<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

上記の方法は、アプリケーション全体によってはどこかで機能しない場合がありますが、最後の方法は、この状況に対する確実な解決策であり、どこでも使用できます。


このメソッドの欠点は、子要素でデフォルトのフォントサイズ(例:14px)を知って繰り返し、通常に戻す必要があることです。
S.Serpooshan 2017年

8

私はこの問題を今抱えていfont-size:0;ましたが、Internet Explorer 7ではInternet Explorerが「フォントサイズ0?!?!WTFはクレイジーマンですか?」と考えるため、問題が残ることがわかりました。-つまり、私の場合、Eric MeyerのCSSリセットで、font-size:0.01em;Internet Explorer 7とFirefox 9で1ピクセルの違いがあるので、これが解決策になると思います。


7

p {
  display: flex;
}
span {
  float: left;
  display: inline-block;
  width: 100px;
  background: red;
  font-size: 30px;
  color: white;
}
<p>
  <span> hello </span>
  <span> world </span>
</p>


1
このコードスニペットは問題を解決する可能性がありますが、説明を含めると、投稿の品質を向上させるのに役立ちます。あなたは将来の読者のための質問に答えていることを覚えておいてください、そしてそれらの人々はあなたのコード提案の理由を知らないかもしれません。また、説明コメントでコードを混雑させないようにしてください。これにより、コードと説明の両方が読みにくくなります。
Ashish Ahuja

私はと推測floatしてdisplay:inline-blockためspanた場合の場合のフォールバックであることを意味していたのflexはサポートされていませんが、float効果の影響を捨てるだろうinline-block後者は冗長と思われるので、。
Ilya Streltsyn

6

私は最近これに取り組んでおり、親font-size:0を設定してから子を適切な値に戻す代わりに、親コンテナを設定しletter-spacing:-.25emてから子をに戻すことで一貫した結果を得ていますletter-spacing:normal

別のスレッドで、私はコメンターがそれについて言及しているのを見ました font-size:0ユーザーがブラウザの最小フォントサイズを制御できるため、常に理想的は限らないことから、font-sizeをゼロに設定する可能性を完全に否定して。

指定されたfont-sizeが100%、15pt、36pxのいずれであるかに関係なく、emsの使用は機能するように見えます。

http://cdpn.io/dKIjo


Android版Firefoxでは、ボックスの間に1pxのスペースがあります。
–ŠimeVidas 2013

5

IE 6/7でさえ、すべてのブラウザでサポートされている非常にシンプルで古い方法があると思います。単純letter-spacingに親で大きな負の値を設定してからnormal、それを子要素に戻すことができます。

body { font-size: 24px }
span { border: 1px solid #b0b0c0; } /* show borders to see spacing */

.no-spacing { letter-spacing: -1em; } /* could be a large negative value */
.no-spacing > * { letter-spacing: normal; } /* => back to normal spacing */
<p style="color:red">Wrong (default spacing):</p>

<div class="">
  <span>Item-1</span>
  <span>Item-2</span>
  <span>Item-3</span>
</div>

<hr/>

<p style="color:green">Correct (no-spacing):</p>

<div class="no-spacing">
  <span>Item-1</span>
  <span>Item-2</span>
  <span>Item-3</span>
</div>


ここで同じことが起こるとletter-spacing:normal、すべての子要素に設定する必要があります。
Gaurav Aggarwal 2017年

@GauravAggarwalですletter-spacingが、99.99%の時間ですnormal。font-sizeにはこのような固定値はなく、デザインに大きく依存します。font-familyやその他に基づいて、小さい値または大きい値になる可能性があります...私は、の特別な値(0 / normal以外)を表示/使用することを覚えていないletter-spacingので、より安全で、より良い選択
S.Serpooshan 2017年

私はこれに同意しません...すべての要素で通常の文字間隔を使用し、font-sizeも使用する(必要な場合)と、フォントサイズを変更する必要がある場所で二重のコードを書くので、まったく役に立ちません。フォントサイズを使用しても二重のコードは作成されず、標準サイズやその他のカスタムサイズで使用できます。私はあなたがグーグルを行い、フォントサイズを使用してチェックすることを最近推奨することをお勧めします。ソリューションは時間とともに変化します:)
Gaurav Aggarwal 2017年

「フォントサイズを変更する必要がある場所で二重のコードを書くので、フォントサイズを(必要に応じて)使用することもまったく役に立たない」という意味がわかりません私の投稿では、フォントサイズの設定はありません!私がしたことはすべて、通常はcssに設定されていない文字間隔です(常に正常です)。フォントサイズを変更しないので、元のフォントサイズを知る必要はありません。
S.Serpooshan

この方法は、Opera / Prestoでは機能しなかったため、以前は普及していなかったと思います。そして現在、そのようなワークアロウンを必要としない他のオプションがあります。たとえば、インラインブロックの代わりにFlexboxを使用します。
Ilya Streltsyn 2017

4

この質問に対する最も簡単な答えは、追加することです。

CSS

float: left;

codepenリンク:http ://jsfiddle.net/dGHFV/3560/


3

PHPブラケット付き:

ul li {
  display: inline-block;
}
    <ul>
        <li>
            <div>first</div>
        </li><?
        ?><li>
            <div>first</div>
        </li><?
        ?><li>
            <div>first</div>
        </li>
    </ul>


2

ここで他のソリューションは複雑すぎる/やりすぎだと思うので、user5609829の答えを少し拡張します。margin-right: -4pxインラインブロック要素にa を適用すると、スペースが削除され、すべてのブラウザーでサポートされます。ここで更新されたフィドルを参照してください。負のマージンの使用に関心がある人は、これを読んでみてください。


4
ユーザーがブラウザのデフォルトのフォントサイズを変更した場合、これは機能しません。-0.25emを使用することをお勧めします。
Martin Schneider

1

CSSテキストモジュールレベル4仕様で定義Atext-space-collapseどのように処理されるか空白要素の内部および周囲に制御することが可能にする、プロパティを。

だから、あなたの例に関しては、あなたはこれを書く必要があるでしょう:

p {
  text-space-collapse: discard;
}

残念ながら、HBP回答へのコメントで言及されているように(2016年9月現在)、まだこのプロパティを実装しているブラウザーはありません。


1

すべてのブラウザでうまく機能する純粋なCSSソリューションを見つけました。

span {
    display: table-cell;
}

この質問はインラインブロックについてです。
Madan Bhandari、2016年

@MadanBhandariは正しいですが、すべての汚いハックの必要性を排除しているようです。
David

1

追加 white-space: nowrapコンテナ要素に:

CSS:

* {
    box-sizing: border-box;
}
.row {
    vertical-align: top;
    white-space: nowrap;
}
.column{
    float: left;
    display: inline-block;
    width: 50% // Or whatever in your case
}

HTML:

<div class="row">
    <div class="column"> Some stuff</div>
    <div class="column">Some other stuff</div>
</div>

こちらがプランカーです。


フロートなしでは機能しません-プランカーにはありません。したがって、「ホワイトスペース:nowrap」は有効な答えにはなりません。
David

1

以下のようなソリューションがたくさんありますfont-size:0word-spacingmargin-leftletter-spacing等が。

通常私は使うのを好むletter-spacingので

  1. 余分なスペースの幅よりも大きい値を割り当てる場合は問題ありません(例:)-1em
  2. ただし、のように大きな値を設定しても問題はword-spacingありません。margin-left-1em
  3. 使い方は、font-size私たちが使用しようとすると便利ではないemとしてfont-sizeユニット。

したがって、letter-spacing最良の選択のようです。

しかし、私はあなたに警告しなければなりません

あなたが使うとき、あなたは他の人letter-spacingを使うべき-0.3em-0.31emそうでないかをよりよくしました。

* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  color: inherit;
  cursor: auto;
}
.nav {
  width: 260px;
  height: 100px;
  background-color: pink;
  color: white;
  font-size: 20px;
  letter-spacing: -1em;
}
.nav__text {
  width: 90px;
  height: 40px;
  box-sizing: border-box;
  border: 1px solid black;
  line-height: 40px;
  background-color: yellowgreen;
  text-align: center;
  display: inline-block;
  letter-spacing: normal;
}
<nav class="nav">
    <span class="nav__text">nav1</span>
    <span class="nav__text">nav2</span>
    <span class="nav__text">nav3</span>
</nav>

Chrome(テストバージョン66.0.3359.139)またはOpera(テストバージョン53.0.2907.99)を使用している場合、次のように表示されます。

ここに画像の説明を入力してください

Firefox(60.0.2)、IE10、またはEdgeを使用している場合、次のように表示されます。

ここに画像の説明を入力してください

それは面白い。それで、私はmdn-letter-spacingをチェックし、これを見つけました:

長さ

文字間のデフォルトのスペースに加えて、追加の文字間スペースを指定します。値は負になる場合がありますが、実装固有の制限がある場合があります。ユーザーエージェントは、テキストを正当化するために文字間スペースをこれ以上増やしたり減らしたりすることはできません。

これが理由のようです。


1

追加letter-spacing:-4px;親にpCSSと追加しletter-spacing:0px;、あなたにspanCSS。

span {
  display:inline-block;
  width:100px;
  background-color:palevioletred;
  vertical-align:bottom;
  letter-spacing:0px;
}

p {
  letter-spacing:-4px;
}
<p>
    <span> Foo </span>
    <span> Bar </span>
</p>


1

現在提供されている回答の多くは十分で適切であるものの、すべてのブラウザーで完全にサポートされ、非常にクリーンな出力を実現できる新しいCSSプロパティがいくつかあるため、この質問に新しい何かを追加すると思いました「ハッキング」はありません。これは先inline-blockに進みますが、求められた質問と同じ結果になります。

これらのCSSプロパティは grid

CSSグリッドはIEを除いて高度にサポートされています(CanIUse-ms-

CSSグリッドはまた、非常に柔軟であり、からすべての良い部分を取りtableflexおよびinline-block要素を一つの場所にそれらをもたらします。

を作成するときにgrid、行と列の間のギャップを指定できます。デフォルトのギャップはすでにに設定されて0pxいますが、この値を好きなように変更できます。

それを少し短くするために、関連する実用的な例を示します:

body {
  background: lightblue;
  font-family: sans-serif;
}

.container {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-column-gap: 0; /* Not needed but useful for example */
  grid-row-gap: 0; /* Not needed but useful for example */
}

.box {
  background: red;
}
.box:nth-child(even) {
  background: green;
}
<div class="container">
  <div class="box">
    Hello
  </div>
  <div class="box">
    Test
  </div>  
</div>


display:grid要素のコンテンツがブロック化されていることを指摘するためにコメントするだけなので、表示はそれほどではありません。グリッドはインラインブロックレイアウトでの作業に役立ちますがinline-block、「ガター」を制御できるものでの作業に置き換えることができますこの質問はしたいです。また、CSSグリッドレイアウトソリューションでこれまで誰も応答していないことに本当に驚いています。
TylerH

これはからの変更であることを明確にしinline-blockます。ええ、私も驚きましたgrid。経験のある人がこれまで実際にこれに来たことはないでしょう。それを少し遊んでいて、この質問に出くわしたので、なぜそう思わなかったのか:P
Stewartside

0

私が見つけたもう1つの方法は、行の最初の要素を除いて、マージン左を負の値として適用することです。

span { 
 display:inline-block;
 width:100px;
 background:blue;
 font-size:30px;
 color:white; 
 text-align:center;
 margin-left:-5px;
}
span:first-child{
 margin:0px;
}

0

inline-blocksの間のスペースを削除しようとするすべての質問は、<table>私にはaのように思えます...

次のようなものを試してください:

p {
  display: table;
}
span {
  width: 100px;
  border: 1px solid silver; /* added for visualization only*/
  display: table-cell;
}
<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.