CSS：什么导致我的divs之间的这些小水平空间？ [英] CSS: What is causing these small horizontal spaces between my divs?

问题描述

我有6个div（'group'），都包含在父div（'groupwhite'）中，并且一切都正常运行，但有一个例外：每个组div之间都有一个很小的横向空间。我无法弄清楚是什么原因造成的。这是我的HTML：

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>

和我的CSS：

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; }

以下是我的窘境：

感谢阅读！

编辑：嘿谢谢大家的回应。这确实是HTML解释我的'组'div元素之间的空白的结果。我是这样解决的：

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>

推荐答案

div之间的换行符导致间距。 HTML将所有空格（新行，制表符，实际空格）和空格运行看作是单个普通空格。

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.

要解决这个问题，只要确保div的结尾标签与下一个div的开放标签齐平。如此：

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

这篇关于CSS：什么导致我的divs之间的这些小水平空间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！