Can't align a p at the top of it's parent div

Question

I have two CSS classes: .Chat and .ChatHeader and specific rules for <p /> and <button />, The button aligns fine with the top of my div but no matter if I write top: 0 or height: 100vh in my style it won't align the <p> to the top of its parent ChatHeader, I also tried <h1> and others but it seems to only work with the button I don't know why: Here is a simple reproductible example:

.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;
}

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

I displayed the background of the <p /> as red to show the problem

It's not clear at all what and who should go where. PS, learn about Block-level, inline and inline-block elements. PS: There's so many unneeded styles in your CSS I don't know where to start from... — Roko C. Buljan, Dec 12 '22 at 08:27
Have you used your browser's dev tools inspect facility to see exactly who/where is setting the CSS for that p element? Browsers tend to put in some default styling, in this case to margins. — A Haworth, Dec 12 '22 at 08:46

score 1 · Accepted Answer · answered Dec 12 '22 at 08:27

1

As you can see in the screenshot, you have the user agent (browser) which is adding margin value

put margin:0 in your .ChatHeader p and it's ok

answered Dec 12 '22 at 08:27

pier farrugia

1,520
2
2
9

Can't align a p at the top of it's parent div

1 Answers1