How do I remove the visibility of spaces between inline elements?

Question

Say I have several inline-block div tags, like this

<div class="image">

</div>
<div class="image">

</div>

class image just sets their size to 100x100 and a gray background color. Their margin and borders are set to 0, and yet there is spacing between the two rectangles.

If I write the HTML such as this, however:

<div class="image">

</div><div class="image">

</div>

Removing all whitespace between the divs, the spacing disappears.

Since I don't want to write my HTML like that, I'm thinking that there must be a way to remove whitespace using CSS. I don't care if the whitespace is removed, hidden or downsized as long as it's visibility is removed.

Thanks for any help

As requested, JSFiddle: http://jsfiddle.net/6h3Jx/

Updated with word-spacing: http://jsfiddle.net/6h3Jx/1/

This is weird, do you have a live example? Also, which browser are you testing in? — Kyle, Jan 18 '11 at 09:10
it shouldn't happen the way you said...can you make a jsfiddle example — kobe, Jan 18 '11 at 09:18
@josh-crozier Excuse me, but how is this the duplicate when this question is two years older? — Hubro, Sep 02 '14 at 11:38

score 1 · Answer 1 · answered Feb 05 '14 at 15:51

you can set "display: flex;" attribute to their parent wrapper:

.flexbox {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

score 1 · Accepted Answer · answered Jan 18 '11 at 10:28

1

it is an inline element behaviour, so try floating left. http://jsfiddle.net/aVrSx/

answered Jan 18 '11 at 10:28

kuyabiye

700
3
13

I can't both float left and center an element. At least I haven't figured out how - any ideas? – Hubro Jan 18 '11 at 10:41
you want these elements centered in a container? – kuyabiye Jan 18 '11 at 12:09
I want them to be centered, and break to the next line if the elements exceed the width of the container. A perfect task for inline-block :) – Hubro Jan 18 '11 at 12:12

score 0 · Answer 3 · edited Sep 13 '12 at 07:20

0

put the following on a parent element:

word-spacing:-4px;

Or try:

font-size:0px;

It might work even better as it will not be affected by text resizing.

edited Sep 13 '12 at 07:20

Soviut

88,194
49
192
260

answered Jan 18 '11 at 09:10

Ivan

3,567
17
25

That did absolutely nothing :-) – Hubro Jan 18 '11 at 09:43
yes, i forgot that word-spacing:0; is the default value. -4px should do the trick. However this will be affected by text resizing, so i've added a second solution to my answer. – Ivan Jan 18 '11 at 10:07
Is there also a value that would hinder font-size:0px; from being inherited down the hierarchy? EDIT: No matter, the font-size solution doesn't work: http://jsfiddle.net/6h3Jx/1/ – Hubro Jan 18 '11 at 10:23
nope, the only solution would be something like .nowhitespace{font-size:0px;} nowhitespace > * { font-size:12px;} – Ivan Jan 18 '11 at 10:28

How do I remove the visibility of spaces between inline elements?

3 Answers3

Linked

Related