文章/答案/技术大牛

发布

社区首页 >问答首页 >HTML/CSS:为什么这些框不动？

问HTML/CSS:为什么这些框不动？
EN

Stack Overflow用户

提问于 2020-05-19 11:30:02

回答 1查看 224关注 0票数 0

我有以下HTML/CSS代码：

<style>
   .container {
    min-height: 100px;
    width: 100%;
    background: Green;

  }

  .timeline-container {
    height: 100px;
    width: 55%;
    background: rgb(0 150 255);

    }
</style>


<div class="container"></div>

<div class="timeline-container">
</div>

...which生成以下图像：绿色盒子和蓝色盒子触摸的图像。

正如你所看到的，盒子是接触的，它们之间没有垂直的空间。

我想在第二个框中添加一些文本，并使用h4元素进行添加。见下面的代码：

<style>
   .container {
    min-height: 100px;
    width: 100%;
    background: Green;

  }

  .timeline-container {
    height: 100px;
    width: 55%;
    background: rgb(0 150 255);

    }
</style>


<div class="container"></div>

<div class="timeline-container">
  <h4>Test words </h4> 
</div>

产生这样的图像：绿色和蓝色的盒子不再触碰

在这两个框之间出现了垂直空间，当我添加h4元素时，它似乎就出现了。我不想要盒子之间的垂直间隔。

我想了解：

为什么这个垂直的空间突然出现(我想我缺少一点基本知识)。
如何创建两个这样的框，在第二个框中有一个h4元素，并且没有这样的空间。

谢谢大家能提供的任何帮助。

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-05-19 11:32:17

删除用于margin的h4，如

.timeline-container h4{
      margin:0;
    }

.container {
    min-height: 100px;
    width: 100%;
    background: Green;

  }

  .timeline-container {
    height: 100px;
    width: 55%;
    background: rgb(0 150 255);

    }
    .timeline-container h4{
      margin:0;
    }

<div class="container"></div>

<div class="timeline-container">
  <h4>Test words </h4> 
</div>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61889954

复制

相似问题

问HTML/CSS:为什么这些框不动？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML/CSS:为什么这些框不动？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML/CSS:为什么这些框不动？
EN