Question

我有6个div（＆＃39; group＆＃39;）都包含在父div（＆＃39; groupwhite＆＃39;）中，并且一切都正常，只有一个例外：两者之间有一个小的水平空间我的每个组div。我无法弄清楚造成它的原因。这是我的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：

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

这是我的窘境照片： What is causing these gaps?

感谢阅读！

编辑：嘿谢谢大家的回复。这确实是HTML解释我的＆＃39;组之间的空白的结果。 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 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>

很抱歉发布了一个与以前回答的问题类似的问题！

Answer 1

这是display: inline-block添加的自然空间，您可以使用float，也可以通过将font-size: 0添加到.groupwhite然后覆盖文本来使用一些黑客攻击容器内的大小

以下是有关修正的链接：

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

Answer 2

div之间的换行符导致间距。 HTML解释所有空格（换行符，制表符，实际空格）和空格运行，就好像它是一个普通的空间一样。

要修复，只需确保div的结束标记与下一个div的开放标记齐平。像这样：

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

CSS：什么导致我的div之间的这些小水平空间？

2 个答案: