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/
it is an inline element behaviour, so try floating left. http://jsfiddle.net/aVrSx/
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+ */
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With