1288

There will be a 4 pixel wide space between these span elements:

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

Fiddle Demo

I understand that I could get rid of that space by removing the white-space between the span elements in the HTML:

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

I'm Looking for a CSS solution that doesn't involve:

  • Altering the HTML.
  • JavaScript.
3

41 Answers 41

1195

Alternatively, you should now use flexbox to achieve many of the layouts that you may previously have used inline-block for: https://css-tricks.com/snippets/css/a-guide-to-flexbox/


Since this answer has become rather popular, I'm rewriting it significantly.

Let's not forget the actual question that was asked:

How to remove the space between inline-block elements? I was hoping for a CSS solution that doesn't require the HTML source code to be tampered with. Can this issue be solved with CSS alone?

It is possible to solve this problem with CSS alone, but there are no completely robust CSS fixes.

The solution I had in my initial answer was to add font-size: 0 to the parent element, and then declare a sensible font-size on the children.

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

This works in recent versions of all modern browsers. It works in IE8. It does not work in Safari 5, but it does work in Safari 6. Safari 5 is nearly a dead browser (0.33%, August 2015).

Most of the possible issues with relative font sizes are not complicated to fix.

However, while this is a reasonable solution if you specifically need a CSS only fix, it's not what I recommend if you're free to change your HTML (as most of us are).


This is what I, as a reasonably experienced web developer, actually do to solve this problem:

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

Yes, that's right. I remove the whitespace in the HTML between the inline-block elements.

It's easy. It's simple. It works everywhere. It's the pragmatic solution.

You do sometimes have to carefully consider where whitespace will come from. Will appending another element with JavaScript add whitespace? No, not if you do it properly.

Let's go on a magical journey of different ways to remove the whitespace, with some new HTML:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
  • You can do this, as I usually do:

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

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

  • Or, this:

     <ul>
         <li>Item 1</li
         ><li>Item 2</li
         ><li>Item 3</li>
     </ul>
    
  • Or, use comments:

     <ul>
         <li>Item 1</li><!--
         --><li>Item 2</li><!--
         --><li>Item 3</li>
     </ul>
    
  • Or, if you are using using PHP or similar:

     <ul>
         <li>Item 1</li><?
         ?><li>Item 2</li><?
         ?><li>Item 3</li>
     </ul>
    
  • Or, you can even skip certain closing tags entirely (all browsers are fine with this):

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

Now that I've gone and bored you to death with "one thousand different ways to remove whitespace, by thirtydot", hopefully you've forgotten all about font-size: 0.

6
  • 11
    this solution only works if you dont work with EMs for your container sizes
    – meo
    Jun 26, 2012 at 14:40
  • 7
    This breaks child elements with relative font-sizes.
    – Daniel
    Jan 15, 2013 at 11:30
  • 4
    Everyone criticizing this answer for not being perfect needs to remember that using inline-blocks for (horizontal) block layout is their first mistake to begin with. Of course these solutions are going to be hacky, of course they're not going to work in every situation - when you're using inline-block for something it was never intended for, it's either your fault for using it or CSS's fault for not offering any good alternatives at the time, but not this answerer's fault that their workarounds aren't ideal.
    – BoltClock
    Feb 10, 2018 at 5:50
  • 2
    @Christopher Alun Lewis: That's because the premise of the question (not this answer) is fundamentally wrong to begin with. The whole point of inline layout is for whitespace to do what it does best: separate words, or in this case atomic inlines. Treating whitespace as a problem that needs to be removed from a layout that uses inline-blocks, rather than as a feature, is like treating text wrapping around a float as a problem when it's the whole point of floating. Even so, inadequate as they both are, floats at least have the advantage over inline-blocks of actually being block layout.
    – BoltClock
    Feb 10, 2018 at 5:56
  • 2
    Care to edit your answer one more time? Flexbox is the definitive solution in 2021 (as other answers reflect); you could simply move that detail from the bottom to the top. Nov 23, 2021 at 20:18
173

For CSS3 conforming browsers there is white-space-collapsing:discard

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

3
  • 62
    This was removed from Text Level 3, but Text Level 4 has text-space-collapse:discard. It's 2016 already and still no support.
    – Oriol
    Jan 4, 2016 at 15:53
  • 4
    Seems obsolete. CSS is not available in Chrome (built May 2022).
    – Avatar
    May 8, 2022 at 7:02
  • 1
    Even the later version mentioned by Oriol isn't suppported. Please consider deleting or reformulating.
    – isherwood
    Jul 25, 2023 at 18:09
115

Today, we should just use Flexbox.


OLD ANSWER:

OK, although I've upvoted both the font-size: 0; and the not implemented CSS3 feature answers, after trying I found out that none of them is a real solution.

Actually, there is not even one workaround without strong side effects.

Then I decided to remove the spaces (this answers is about this argument) between the inline-block divs from my HTML source (JSP), turning this:

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

to this

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

that is ugly, but working.

But, wait a minute... what if I'm generating my divs inside Taglibs loops (Struts2, JSTL, etc...) ?

For example:

<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>

It is absolutely not thinkable to inline all that stuff, it would mean

<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>

That is not readable, hard to maintain and understand, etc.

The solution I found:

use HTML comments to connect the end of one div to the begin of the next one!

<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>

This way you will have a readable and correctly indented code.

And, as a positive side effect, the HTML source, although infested by empty comments, will result correctly indented;

let's take the first example. In my humble opinion, this:

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

is better than this:

    <div class="inlineBlock">
         I'm an inline-block div
    </div><div class="inlineBlock">
         I'm an inline-block div
    </div>
2
  • 1
    Note that this may also break code folding functionality in your editor.
    – jknotek
    May 4, 2018 at 22:11
  • 3
    An example of using Flexbox at the top would improve this answer.
    – TylerH
    Feb 26, 2021 at 19:19
86

Add display: flex; to the parent element. Here is the solution with a prefix:

Simplified 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 with prefix 👇

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>

3
  • 1
    I am getting unexpected behaviour when the contents of the span are longer than one word - for example. the following displays the span contents in long columns, not 'normal' flowing lines of text: <div class="container"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span><span>Donec mollis nulla vel dignissim varius, aliquam tempor elit eget ante viverra ultrices</span></div> note: i have replaced <p> with a container div - jsFiddle link is here Aug 5, 2020 at 7:53
  • 1
    Added display:flex to the main div for a wordpress menu and that made the spacing go away
    – carnini
    Feb 23, 2022 at 21:34
  • 1
    thats it. simple. clean.
    – malibil
    Jan 23 at 9:41
55

All the space elimination techniques for display:inline-block are nasty hacks...

Use Flexbox

It's awesome, solves all this inline-block layout bs, and as of 2017 has 98% browser support (more if you don't care about old IEs).

3
  • 2
    nasty hack may be, but font-size:0 works on 100% of the browsers, and applying display: inline-flex still doesn't get rid of the extra whitespace, even on a browser that does support it!
    – patrick
    Jun 19, 2016 at 21:50
  • @patrick Flexbox definitely solves the problem, you're just doing it wrong. inline-flex is not meant to display flex items inline- it applies only to containers. See stackoverflow.com/a/27459133/165673
    – Yarin
    Apr 27, 2017 at 1:57
  • 9
    "font-size:0" does not work on 100% browsers. (minimum font size browser settings). And this answer is really good.
    – ViliusL
    Apr 4, 2018 at 13:23
50

Add comments between elements to NOT have a white space. For me it is easier than resetting font size to zero and then setting it back.

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

2021 Solution

Unfortunately white-space-collapse is still not implemented.

In the meantime, give the parent element font-size: 0; and set the font-size on the children. This should do the trick

0
32

This is the same answer I gave over on the related: Display: Inline block - What is that space?

There’s actually a really simple way to remove whitespace from inline-block that’s both easy and semantic. It’s called a custom font with zero-width spaces, which allows you to collapse the whitespace (added by the browser for inline elements when they're on separate lines) at the font level using a very tiny font. Once you declare the font, you just change the font-family on the container and back again on the children, and voila. Like this:

@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;
}

Suit to taste. Here’s a download to the font I just cooked up in font-forge and converted with FontSquirrel webfont generator. Took me all of 5 minutes. The css @font-face declaration is included: zipped zero-width space font. It's in Google Drive so you'll need to click File > Download to save it to your computer. You'll probably need to change the font paths as well if you copy the declaration to your main css file.

4
  • 1
    I saw you post this in CSS Tricks I think, and for me this is a great answer. It's lightweight, easy to implement and cross-browser (so far as my tests have shown). I was totally going with flexbox until I realised that Firefox won't support flex-wrap until at least v28 (srsly?), but this is a perfect fallback until then.
    – indextwo
    Jan 23, 2014 at 21:03
  • 19
    This is the worst case of overkill I saw in a long while. Download an entire font just to remove a space? Geez.
    – Mr Lister
    Nov 4, 2015 at 13:27
  • 3
    @MrLister you do realise that such font file is tiny one? It doesn't havy any glyphs inside. I would argue to rather include it base64 encoded anyway so we get rid of the request as well. Feb 14, 2018 at 15:46
  • This has the same fatal flaw as icon fonts, i.e. it will not work when Web fonts are either blocked (e.g. for bandwidth or security reasons) or overwritten by custom fonts (e.g. due to health causes, such as dyslexia, etc.).
    – tomasz86
    Oct 1, 2019 at 5:56
26

Two more options based on CSS Text Module Level 3 (instead of white-space-collapsing:discard which had been dropped from the spec draft):

  • word-spacing: -100%;

In theory, it should do exactly what is needed — shorten whitespaces between 'words' by the 100% of the space character width, i.e. to zero. But seems not to work anywhere, unfortunately, and this feature is marked 'at risk' (it can be dropped from the specification, too).

  • word-spacing: -1ch;

It shortens the inter-word spaces by the width of the digit '0'. In a monospace font it should be exactly equal to the width of the space character (and any other character as well). This works in Firefox 10+, Chrome 27+, and almost works in Internet Explorer 9+.

Fiddle

3
  • +1 for word-spacing, although -0.5ch is the right value, with -1ch text without spaces won't be readable, -0.5ch behaves just like font-size: 0; with explicit set size at text elements. :)
    – Dennis98
    Oct 27, 2015 at 8:55
  • 7
    @Dennis98, -1ch works only for monospace fonts (like Courier New), because all their characters have the same width, including ' ' and '0'. In non-monospace fonts there is no all-suitable magic proportion between widths of ' ' and '0' characters, so ch isn't much helpful at all. Nov 13, 2015 at 12:12
  • instead of word-spacing, we could use letter-spacing with an arbitrary large negative value as shown in my answer Jan 18, 2017 at 12:14
18

Use flexbox and do a fallback (from suggestions above) for older browsers:

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

Simple:

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

There is no need to touch the parent element.

Only condition here: the item's font-size must not be defined (must be equal to parent's font-size).

0.25em is the default word-spacing

W3Schools - word-spacing property

3
  • 4
    0.25em is not the "default word-spacing", it's the width of the whitespace character in Times New Roman font that just happens to be the default font in some popular OSes. Other popular fonts like Helvetica often have wider whitespace character, so removing only 0.25em from them would be insufficient to get rid of the gaps. Dec 23, 2019 at 6:29
  • Yes working with negative margins is simple and the only thing that actually worked in my case.
    – Andreas
    Aug 27, 2020 at 8:47
  • Solved mine too! Jul 18, 2023 at 19:21
18

Though, technically not an answer to the question: "How do I remove the space between inline-block elements?"

You can try the flexbox solution and apply the code below and the space will be remove.

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

You can learn more about it on this link: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

1
  • While technically not an answer to "can I do this with inline-block" this seems to me to be an elegant solution...
    – Lucas
    Feb 24, 2017 at 21:21
15

font-size:0; can be a bit trickier to manage...

I think the following couple lines is a lot better and more re-usable, and time saver than any other methods. I personally use this:

.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;}

Then you can use it as following...

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

As far I as I know (I may be wrong) but all browsers support this method.

EXPLANATION:

This works (maybe -3px may be better) exactly as you would anticipate it to work.

  • you copy and paste the code (once)
  • then on your html just use class="items" on the parent of each inline-block.

You will NOT have the need to go back to the css, and add another css rule, for your new inline blocks.

Solving two issues at once.

Also note the > (greater than sign) this means that */all children should be inline-block.

http://jsfiddle.net/fD5u3/

NOTE: I have modified to accommodate to inherit letter-spacing when a wrapper has a child wrapper.

1
13

Generally we use elements like this in different lines, but in case of display:inline-block using tags in same line will remove the space, but in a different line will not.

An example with tags in a different line:

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

Example with tags in same line

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


Another efficient method is a CSS job that is using font-size:0 to the parent element and give font-size to a child element as much as you want.

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

The above methods may not work somewhere depending on the whole application, but the last method is a foolproof solution for this situation and can be used anywhere.

1
  • a disadvantage for this method is that we need to know and repeat the default font-size (eg 14px) to set it back to normal in child elements! Jan 23, 2017 at 4:29
13

I'm not pretty sure if you want to make two blue spans without a gap or want to handle other white-space, but if you want to remove the gap:

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

    float: left;
}

And done.

11

I had this problem right now and from font-size:0; I've found that in Internet Explorer 7 the problem remains because Internet Explorer thinks "Font Size 0?!?! WTF are you crazy man?" - So, in my case I've Eric Meyer's CSS reset and with font-size:0.01em; I have a difference of 1 pixel from Internet Explorer 7 to Firefox 9, so, I think this can be a solution.

9

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>

2
  • 1
    While this code snippet may solve the question, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. Please also try not to crowd your code with explanatory comments, this reduces the readability of both the code and the explanations! Jun 9, 2016 at 12:40
  • I guess that float and display:inline-block for spans were meant to be fallbacks for the case if flex is not supported, but float would effectively discard the effect of inline-block, so the latter seems redundant. Dec 23, 2019 at 6:26
8

The simplest answer to this question is to add.

css

float: left;

codepen link: http://jsfiddle.net/dGHFV/3560/

0
7

I’ve been tackling this recently and instead of setting the parent font-size:0 then setting the child back to a reasonable value, I’ve been getting consistent results by setting the parent container letter-spacing:-.25em then the child back to letter-spacing:normal.

In an alternate thread I saw a commenter mention that font-size:0 isn’t always ideal because people can control minimum font sizes in their browsers, completely negating the possibility of setting the font-size to zero.

Using ems appears to work regardless of whether the font-size specified is 100%, 15pt or 36px.

http://cdpn.io/dKIjo

1
  • In Firefox for Android, I see a 1px space between the boxes. Oct 2, 2013 at 15:23
7

I think there is a very simple/old method for this which is supported by all browsers even IE 6/7. We could simply set letter-spacing to a large negative value in parent and then set it back to normal at child elements:

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>

5
  • same thing happening here u need to set letter-spacing:normal in all the child elements. Jan 23, 2017 at 5:49
  • @GauravAggarwal but letter-spacing is 99.99% of the times as normal. the font-size has not such a fixed value and highly depends on design. it could be a small value or large value based on the font-family and other things... I never remember in my life to see/use a special value (other than 0/normal) for letter-spacing, so i think it is safer and better choise Jan 23, 2017 at 5:58
  • i disagree with this...using letter spacing to normal with all the elements and using font-size too (If needed) is not at all usefull as u r writing double code where u need to change font size. Using font size will not make double code and can be used o standard size and any other custom size. I suggest you to do google and check using font size is most acceptable thing these days. Solution changes with time :) Jan 23, 2017 at 6:21
  • i can't understand what you mean by "...and using font-size too (If needed) is not at all usefull as u r writing double code where u need to change font size." in my post, there is no font-size setting! all i did is letter-spacing which usually nobody set it in his css (it is always normal). ans as we don't change font-size, we don't need to know original font-size to set it back Jan 23, 2017 at 9:26
  • I suppose this method didn't become popular before because it didn't work in Opera/Presto. And currently we have other options that don't need such workarouns, e.g. using Flexbox instead of inline-blocks. Aug 8, 2017 at 15:50
4

With PHP brackets:

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

3

I found a pure CSS solution that worked for me very well in all browsers:

span {
    display: table-cell;
}
2
  • this question is about inline-block. May 30, 2016 at 12:27
  • 1
    @MadanBhandari correct but it seems removing the need of all the dirty hacks.
    – David
    Mar 28, 2020 at 18:09
2

I'm going to expand on user5609829's answer a little bit as I believe the other solutions here are too complicated/too much work. Applying a margin-right: -4px to the inline block elements will remove the spacing and is supported by all browsers. See the updated fiddle here. For those concerned with using negative margins, try giving this a read.

1
  • 4
    This will not work if user changes the default font-size of his browser. Better use -0.25em. Jul 12, 2016 at 11:45
2

Add white-space: nowrap to the container element:

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>

Here is the Plunker.

1
  • doesn't work without the float - which is missing in your plunker. So "white-space: nowrap" never seems being a working answer.
    – David
    Mar 28, 2020 at 18:01
2

I thought I'd add something new to this question as although many of the answers currently provided are more than adequate & relevant, there are some new CSS properties which can achieve a very clean output, with full support across all browsers, and little to no 'hacks'. This does move away from inline-block but it gives you the same results as the question asked for.

These CSS properties are grid

CSS Grid is highly supported (CanIUse) apart from IE which only needs an -ms- prefix to allow for it to work.

CSS Grid is also highly flexible, and takes all the good parts from table, flex, and inline-block elements and brings them into one place.

When creating a grid you can specify the gaps between the rows and columns. The default gap is already set to 0px but you can change this value to whatever you like.

To cut it a bit short, heres a relevant working example:

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>

2
  • Just commenting to point out the contents of a display:grid element are blockified, so it's not so much that display: grid helps you work with inline-block layouts, but rather it lets you replace working with inline-block with something where you can control the 'gutters' as this question wants to. Also, I'm really surprised no one has responded yet with a CSS Grid Layout solution before now.
    – TylerH
    Oct 14, 2019 at 15:32
  • Will make it clearer this is a change from inline-block. And yeah, I was surprised as well, guess nobody with grid experience had really come to this before. Have been playing around with it a little bit and came across this question so thought why not :P Oct 14, 2019 at 15:47
1

The CSS Text Module Level 4 specification defines a text-space-collapse property, which allow to control the how white space inside and around an element is processed.

So, regarding your example, you would just have to write this:

p {
  text-space-collapse: discard;
}

Unfortunately, no browser is implementing this property yet (as of September 2016) as mentioned in the comments to the answer of HBP.

1

There are lots of solutions like font-size:0,word-spacing,margin-left,letter-spacing and so on.

Normally I prefer using letter-spacing because

  1. it seems ok when we assign a value which is bigger than the width of extra space(e.g. -1em).
  2. However, it won't be okay with word-spacing and margin-left when we set bigger value like -1em.
  3. Using font-size is not convenient when we try to using em as font-size unit.

So, letter-spacing seems to be the best choice.

However, I have to warn you

when you using letter-spacing you had better using -0.3em or -0.31em not others.

* {
  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>

If you are using Chrome(test version 66.0.3359.139) or Opera(test version 53.0.2907.99), what you see might be:

enter image description here

If you are using Firefox(60.0.2),IE10 or Edge, what you see might be:

enter image description here

That's interesting. So, I checked the mdn-letter-spacing and found this:

length

Specifies extra inter-character space in addition to the default space between characters. Values may be negative, but there may be implementation-specific limits. User agents may not further increase or decrease the inter-character space in order to justify text.

It seems that this is the reason.

1

Add letter-spacing:-4px; on parent p css and add letter-spacing:0px; to your span css.

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

Negative margin

You can scoot the elements back into place with negative 4px of margin (may need to be adjusted based on font size of parent). Apparently this is problematic in older IE (6 & 7), but if you don’t care about those browsers at least you can keep the code formatting clean.

span {
  display: inline-block;
  margin-right: -4px;
}
0

One another way I found is applying margin-left as negative values except the first element of the row.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.