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

Question

This question already has answers here:

Basic CSS positioning (fitting children in container) (4 answers)

Closed 8 years ago.

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:

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!

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

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