after adding second div firstchild goes down

Question

I made general css to .planarea div so whenever I decide to add new div in .planarea they will be same but i've some problem, the problem is that when I add second third or etc. divs first div goes down any solutions ?

.planarea div {
  margin-left: 15px;
  border-radius: 16px 16px 0px 16px;
  margin-top: 70px;
  width: 225px;
  height: 220px;
  background: yellow;
  display: inline-block;
  box-shadow: 3px 5px rgba(95, 95, 95, 0.308);
}

.planarea div h1 {
  text-align: center;
  font-family: 'Big Shoulders Text', cursive;
}

.planarea div p {
  font-family: 'Big Shoulders Text', cursive;
}

<div class="planarea">
  <div>
    <h1>asd</h1>
    <p>asdasdasd</p>
  </div>
  <div></div>
</div>

score 2 · Accepted Answer · answered Oct 29 '19 at 18:49

The default vertical-align property value is baseline, which is what you see. Change it to top and you get:

.planarea div {
  margin-left: 15px;
  border-radius: 16px 16px 0px 16px;
  margin-top: 70px;
  width: 225px;
  height: 220px;
  background: yellow;
  display: inline-block;
  box-shadow: 3px 5px rgba(95, 95, 95, 0.308);
  vertical-align:top;
}

.planarea div h1 {
  text-align: center;
  font-family: 'Big Shoulders Text', cursive;
}

.planarea div p {
  font-family: 'Big Shoulders Text', cursive;
}

<div class="planarea">
  <div>
    <h1>asd</h1>
    <p>asdasdasd</p>
  </div>
  <div></div>
</div>

after adding second div firstchild goes down

1 Answers1