无法将 p 与其父 div 的顶部对齐答案

【问题标题】：Can't align a p at the top of it's parent div无法将 p 与其父 div 的顶部对齐
【发布时间】：2022-12-17 20:45:06
【问题描述】：

我有两个 CSS 类：.Chat 和 .ChatHeader 以及 <p /> 和 <button /> 的特定规则，按钮与我的 div 顶部对齐很好，但无论我在我的样式它不会将 <p> 与其父级 ChatHeader 的顶部对齐，我也尝试了 <h1> 和其他但它似乎只适用于我不知道为什么的按钮：这是一个简单的可复制示例:

<div class='Chat'>
  <div class='ChatHeader'>
    <p>
      Online users: 5
    </p>
    <button>
      Button
    </button>
  </div>
</div>

.Chat {
    height: 100vh;
    width: 100vw;
    background-color: rgb(255, 255, 255);
    border: none;
    border-radius: 0;
}

.ChatHeader {
    width: 100vw;
    height: 65px;
    background-color: rgb(0, 0, 0);
    display: grid;
    grid-template-columns: 300px 100px;
    grid-template-rows: 65px;
    color: rgb(163, 0, 0);
}

.Chat button {
    width: 80px;
    height: 35px;
    background-color: rgb(149, 35, 35);
    border-radius: 30%;
    color: white;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    line-height: 20px;
    cursor: pointer;
}

.ChatHeader p {
    height: 100%;
    background: none;
    color: inherit;
    padding: 0;
    font-family: inherit;
    width: 300px;
    background-color: red;
    text-decoration: none;
}

我将 <p /> 的背景显示为红色以显示问题

【问题讨论】：

根本不清楚什么和谁应该去哪里。 PS，了解 Block-level，inline 和 inline-block 元素。 PS：你的CSS中有太多不需要的样式我不知道从哪里开始......

标签： html css

【解决方案1】：

正如您在屏幕截图中看到的，您有正在添加保证金值的用户代理（浏览器）

把 margin:0 放在你的 .ChatHeader p 里就可以了

【讨论】：

谢谢！这就是我想要的