相对于其父级未设置CSS边距

Question

新手问题警报，请看以下示例： http : //codepen.io/cguo/pen/mVNgvG

h1元素的页margin-top为60像素。 即使h1元素位于container div内， margin-top也不是相对于container设置的，而是相对于页面顶部的设置。

为了实现我想要的，我必须将h1的margin-top更改为padding-top 。

为什么相对于父母没有设置边距？ 这是保证金的标准行为吗？

Answer 1

默认情况下，块级元素的边界超出其容器的边界。 为了确保它们保留在其中，您需要使容器成为块格式化上下文根。

有几种方法可以做到这一点。 一种是使容器具有以下属性：hidden

.container
  //existing code
  overflow: hidden

这是一个令人头疼的主题，在这里无法解释，但是如果您对元素为何以行为方式运作的机制感兴趣，我建议您特别学习视觉格式模型和块格式上下文（对于初学者）。