如何使 div 粘在父容器的顶部 [重复]答案

【问题标题】：How to make a div stick to the top of a parent container [duplicate]如何使 div 粘在父容器的顶部 [重复]
【发布时间】：2020-12-07 20:09:19
【问题描述】：

我正在尝试将具有背景颜色的 div 粘贴到其父容器的顶部。我的目标是在结构上类似于以下内容：

我试过垂直对齐：顶部；并删除填充（我留下的），但我似乎无法让它工作。

这是我当前的 HTML 和 CSS 的演示。

.well {
    min-height: 20px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
}

.section-title {
  background-color: lightblue;
  width: auto;
  display: block;
}

<section class="well">
    <div class="section-title">
        <p>/title/</p>
    </div>
    <p>section content</p>
</section>

【问题讨论】：

.section-title p { margin:0 }

标签： html css

【解决方案1】：

几乎所有用户代理的p 元素都附加了一个默认的margin 属性。删除margin 并应用padding。看我的例子。

.well {
    min-height: 20px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
}

.section-title {
  background-color: lightblue;
  width: auto;
  display: block;
}

p {
  padding: 10px;
  margin: 0;
}

<section class="well">
    <div class="section-title">
        <p>/title/</p>
    </div>
    <p>section content</p>
</section>

【讨论】：

谢谢。完美工作:)