Why p tag doesn't place at the top when align-items: flex-start?

Question

There are three same-sized boxes. They have div, p, and span tag respectively.

All the boxes are flexbox and apply align-items: flex-start but the result is different:

.small-box__a {
  background: burlywood;
  width: 100px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.small-box__b {
  background: crimson;
  width: 100px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.small-box__c {
  background: coral;
  width: 100px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

<div class="small-box__a">
  <div>div</div>
</div>
<div class="small-box__b">
  <p>p tag</p>
</div>
<div class="small-box__c"><span>span</span></div>

the result is:

Why p tag doesn't place at the top? and how could I place the p tag at exatly the top?

For future reference, you should learn how to use the browser inspector. It can highlight the different parts (content, padding, border, margin) or elements to help you understand what's going on. — Domino, Mar 13 '20 at 13:33

score 2 · Answer 1 · answered Mar 13 '20 at 13:27

Paragraphs have a default margin. Just set it to zero like:

.small-box__a {
  background: burlywood;
  width: 100px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.small-box__b {
  background: crimson;
  width: 100px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.small-box__c {
  background: coral;
  width: 100px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

p {
  margin: 0;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8" />
  <title>Flex</title>
</head>

<body>
  <div class="small-box__a">
    <div>div</div>
  </div>
  <div class="small-box__b">
    <p>p tag</p>
  </div>
  <div class="small-box__c"><span>span</span></div>
</body>

</html>

Why p tag doesn't place at the top when align-items: flex-start?

1 Answers1