CSS: What is causing these small horizontal spaces between my divs?

Question

I have six divs ('group') all contained within a parent div ('groupwhite'), and everything is behaving normally with one exception: there is a small horizontal space between each of my group divs. I can't figure out what is causing it. Here's my HTML:

<div class="groups">
    <div class="groupwhite">
            <div class="group">
                <p class="grouptitle"><a href="#">Name of group goes here</a></p>
                <p class="grouptext">Brief description of group goes here.</p>
            </div>
            <div class="group">
                <p class="grouptitle"><a href="#">Name of group goes here</a></p>
                <p class="grouptext">Brief description of group goes here</p>
            </div>
            <div class="group">
                <p class="grouptitle"><a href="#">Name of group goes here</a></p>
                <p class="grouptext">Brief description of group goes here.</p>
            </div>
            <div class="group">
                <p class="grouptitle"><a href="#">Name of group goes here</a></p>
                <p class="grouptext">Brief description of group goes here.</p>
            </div>
            <div class="group">
                <p class="grouptitle"><a href="#">Name of group goes here</a></p>
                <p class="grouptext">Brief description of group goes here.</p>
            </div>
            <div class="group">
                <p class="grouptitle"><a href="#">Name of group goes here</a></p>
                <p class="grouptext">Brief description of group goes here.</p>
            </div>
    </div>
</div>

And my CSS:

.groupwhite {


font-family: Helvetica;
  font-size: 110%;
  background-color: white;
  position: relative;
  height: auto;
  width: 88%;
  margin: 65px auto 65px auto;
  text-align: center;
  padding: 26px 26px 24px 26px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -khtml-border-radius: 10px;
  behavior: url(lib/PIE.htc); }
  @media (max-width: 490px) {
    .groupwhite {
      padding: 26px 18px 24px 18px; } }

p {
  padding: 0px;
  margin: 0px; }

a {
  text-decoration: inherit;
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
  padding: 0px;
  margin: 0px;
  word-wrap: break-word; }

div {
  margin: 0px;
  padding: 0px; }

.group {
  display: inline-block;
  width: 300px;
  height: 300px;
  min-height: 300px;
  min-width: 300px;
  padding: 0px;
  margin: 0px;
  background-color: cyan;
  vertical-align: top; }

.grouptitle {
  font-size: 135%;
  color: black;
  text-decoration: none;
  font-weight: bold;
  padding: 0px;
  margin: 0px; }

.grouptext {
  padding: 0px;
  margin: 0px;
  word-wrap: break-word; }

And here's a picture of my quandary: What is causing these gaps?

Thanks for reading!

EDIT: Hey thanks for the responses everybody. It is indeed a result of HTML interpreting the whitespace between my 'group' div elements. I fixed it like this:

        <div class="group">
            <p class="grouptitle"><a href="#">Name of group goes here<a></p>
            <p class="grouptext">Brief description of group goes here. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
        </div><div class="group">
            <p class="grouptitle"><a href="#">Name of group goes here<a></p>
            <p class="grouptext">Brief description of group goes here. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
        </div>

Sorry for posting a question so similar to one previously answered!

Your question is the same as one posted earlier today. See http://stackoverflow.com/questions/21315826/basic-css-positioning-fitting-children-in-container/21315855#21315855 — j08691, Jan 24 '14 at 03:53
Technically this question is not related to CSS, but I understand that you might not know that (because you're asking this question). Mind removing the css tag? — rvighne, Jan 24 '14 at 03:58
I could if you like, but might it help future searches for a similar problem if I left it in? — Ber, Jan 24 '14 at 04:01
@Ber this is not a solution for ur question, remove the html warnings by adding close tags for `a` element(``) is a good practice. — super, Jan 24 '14 at 04:05
Thanks Dave, bios and rvighne for pointing that out! (I had missed the closing tag on my links) — Ber, Jan 24 '14 at 04:07
Glad it worked! Please accept the answer that worked for you. It's considered bad to edit your *question* saying that an *answer* worked. — rvighne, Jan 24 '14 at 04:10
Oh yeah sorry! Not enough time had passed when I first tried and I forgot to go back and check an answer. — Ber, Jan 24 '14 at 04:13

jmore009 · Answer 1 · 2014-01-24T04:04:37.467

2

it's a natural space added by display: inline-block you can either use float or you can use a bit of a hack by adding font-size: 0 to .groupwhite and then overriding the text size inside that container

Here is a link about fixes:

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

edited Jan 24 '14 at 04:04

answered Jan 24 '14 at 03:53

jmore009

12,863
1
19
34

Nope, inline-block doesn't change anything except the fact that it's in the same line as surrounding text. Float won't fix it. – rvighne Jan 24 '14 at 03:55
you're wrong. That's exactly what it is. Check out this fiddle, I changed `inline-block` to `float:left` [fiddle](http://jsfiddle.net/tQBLk/) Change it back to inline block and you'll see the space. Then try that hack and you'll see it works – jmore009 Jan 24 '14 at 03:56
@jmore009 JSFiddle doesnt display the "lines" with the code the OP provided, the only thing your edit did (at least for me) was float the entire group to the left – CumminUp07 Jan 24 '14 at 03:58
1

this is a well documented issue: http://stackoverflow.com/questions/1833734/display-inline-block-extra-margin – jmore009 Jan 24 '14 at 03:59
@jmore009 I see, but now you have another problem. The float changes the appearance of the document, definitely undesirable. – rvighne Jan 24 '14 at 04:00
@CumminUp07 take out `float: left` on `.group` and add `display: inline:block` and that was the OP's code – jmore009 Jan 24 '14 at 04:00
I understand, that's why I said to use the font-size hack, those are the two ways to handle this issue – jmore009 Jan 24 '14 at 04:01

rvighne · Accepted Answer · 2014-01-24T04:06:35.867

1

The line breaks between the divs are causing the spacing. HTML interprets all whitespace (newlines, tabs, real spaces) and runs of whitespace as if it were a single normal space.

To fix, just make sure that the div's end tag is flush with the next div's open tag. Like so:

</div><div class="group"> <!-- no line break, no whitespace, nothing at all -->

edited Jan 24 '14 at 04:06

answered Jan 24 '14 at 03:52

rvighne

20,755
11
51
73

CSS: What is causing these small horizontal spaces between my divs?

2 Answers2

Linked