Question

任何人都可以让我知道为什么下面的代码会在div＆＃34; content-main＆＃39;和两个介绍div之间产生空格，这两个div位于主要内容之上？

＆＃13;

.header {
  width: inherit;
  background-color: #58614E;
  height: 8em;
  position: relative;
  z-index: 2;
}
.header-logo {
  float: left;
  display: inline-block;
}
#header-home-link {
  color: white;
  font-weight: bold;
  margin-left: 3em;
  position: relative;
  top: 1em;
}
.header a:link {
  color: #C5EBF9;
  position: relative;
  top: 1em;
  padding-left: 1em;
}
.introduction-left {
  background-color: #EEEEEE;
  width: 55%;
  padding-bottom: 1em;
  padding-right: 1.0em;
  padding-top: 1em;
  border-right-style: dotted;
  border-right-width: 1px;
  float: left;
  overflow: auto;
}
.introduction-left h2 {
  color: #57614E;
  padding-left: 13em;
}
.introduction-left p {
  color: #626262;
  padding-left: 2.0em;
  z-index: 2;
}
.introduction-right {
  background-color: #EEEEEE;
  width: 40%;
  float: right;
  z-index: 0;
  padding-right: 3.3em;
  padding-top: 2em;
  padding-bottom: 3.7em;
}
.introduction-right h2 {
  color: #57614E;
  font-style: italic;
  position: relative;
  left: 3em;
  bottom: 0.5em;
  margin: 0;
}
.introduction-right p {
  padding-left: 1em;
  color: #57614E;
}
.content-main {
  background-color: #E2E2E2;
  border-style: solid;
  border-width: 1em;
  border-color: white;
  width: 100%;
  overflow: auto;
}
.content-main h3 {
  color: #728063;
  font-style: italic;
  padding-left: 15em;
}

＆＃13;

<div class="header">


</div>
<div class="introduction-left">
  <h2>Today's News</h2>
  <p>This website template has been designed by Free Website Templates for you, for free. You can replace all this text with your own text. You can remove any link to our website from this website template, you're free to use this website template without
    linking back to us. If you're having problems editing this website template, then don't hesitate to ask for help on the Forums.</p>
</div>

<div class="introduction-right">

  <h2>Testimonials</h2>

  <p>"You can remove any link to our website from this website template, you're free to use this website template without linking back to us.”

  </p>
</div>

<div class="content-main">
  <h3>Main Articles.</h3>

</div>

＆＃13;

Answer 1

我认为因为你使用

  .content-main{
            border-style: solid;
            border-width: 1em;

尝试使用

    .content-main{
            background-color: #E2E2E2;
            border-style: none;
            width: 100%;
            overflow:auto;

在你的CSS中，我看到（Linux上的最后一个Chrome）

当我使用border-style: none时，我得到（第二个div，主要上下文没有空格）：

这是你想要的？

Answer 2

快速回答 - 不一定正确：

尝试暂时删除CSS中的所有填充语句，看看它的外观......

然后根据需要将它们重新添加。

Answer 3

元素之间的空格会导致出现空白区域。放入某种包装器并给它$('#myModal').modal('show');，然后给div添加文本font-size: 0，或者如果你关心使IE兼容给它font-size: initial或者其他什么，因为{{ 1}}不能在IE上工作。

div标签之间的水平空白区域

3 个答案: