Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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/

like image 489
Hubro Avatar asked Jan 18 '11 09:01

Hubro


2 Answers

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

like image 165
kuyabiye Avatar answered Nov 15 '22 11:11

kuyabiye


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+ */
}
like image 28
user2711081 Avatar answered Nov 15 '22 09:11

user2711081