CSS自动添加上边距

Question

我对前端材料很陌生，所以请耐心等待 我试着解释这个问题。

我在试图将三个盒子并排排列时遇到问题。 但是，当我尝试在框中添加<p>标记时，是一个上边距 得到补充。这就是我的意思。

<div class="work-box">
  <div class="box">
    <div class="idea">
    </div>
     <p>Hello World</p>
  </div>
  <div class="box">
    <div class="idea">

    </div>
  </div>
  <div class="box">
    <div class="idea">

    </div>
  </div>
</div>

如您所见，这些框包含在“工作框”类中。这是CSS代码。

.work-box {
  text-align: center;
}

.box {
  margin-top: 30px;
  display: inline-block;
  width: 30%;
  height: 300px;
  background-color: #495159;
  border: solid #A1E8CC thick;
}

.idea {
  height: 50%;
  background: url('img/idea.svg') center no-repeat;
  background-size: contain;
}

我整整一天都在努力解决这个问题而且我无法理解。请帮忙！

非常感谢你。

Answer 1

解决方案：将vertical-align: top添加到.box课程。

说明：您看到的效果是因为对于所有inline元素，vertical-align默认为baseline。

如果.box中包含内联元素，这会很有趣。因为它会尝试将最后一个内联元素与所有内联元素的baseline对齐。

Answer 2

尝试将vertical-align:middle;添加到box类。

.box {
  margin-top: 30px;
  display: inline-block;
  vertical-align:middle;
  width: 30%;
  height: 300px;
  background-color: #495159;
  border: solid #A1E8CC thick;
}

See Codepen Example here

Answer 3

您尝试使用<span>Hello world</span>代替<p>代码。此外，<p>标记不在.idea div中。好吗？我认为它应该在<div class="idea">

之内