div 顶部有这个奇怪的边距。我该如何解决？ [复制]答案

【问题标题】：div has this weird margin on top. How do I fix this? [duplicate]div 顶部有这个奇怪的边距。我该如何解决？ [复制]
【发布时间】：2016-01-29 20:16:55
【问题描述】：

希望你一切都好。

我有 2 个彼此内联的 div。但由于某种原因，右边的 div 在顶部有这个奇怪的边距。如何让两个 div 都保持在顶部而没有任何奇怪的边距？我也想知道哪里出了问题。

链接到 jsfiddle - https://jsfiddle.net/vynd2k85/1/

提前致谢！

.context {
  box-sizing: border-box;
  width:49%;
  padding: 10px;
  background: #72ED80;
  font-family: 'Source Sans Pro', sans-serif;
  display: inline-block;
  margin: 0;
}
.context h1 {
  text-align: left;
  font-size: 14px;
}
.context ul li {font-style: normal; margin: 0; font-size: 14px; line-height: 150%;}

【问题讨论】：

垂直对齐：顶部；否则默认为基线
感谢您的回答！

标签： html css

【解决方案1】：

查看更新的小提琴。

https://jsfiddle.net/a1L8tugz/

这里的问题是，默认情况下，将div 内联会使其与底部对齐，因此您需要像这样添加垂直对齐。

.context {
box-sizing: border-box;
width:49%;
padding: 10px;
background: #72ED80;
font-family: 'Source Sans Pro', sans-serif;
display: inline-block;
margin: 0;
vertical-align: top; 
}

【讨论】：

感谢您的回答！

【解决方案2】：

这不是边距，它是垂直对齐。只需将 vertical-align:top 添加到您的内容类：

.context {
    box-sizing: border-box;
    width:49%;
    padding: 10px;
    background: #72ED80;
    font-family:'Source Sans Pro', sans-serif;
    display: inline-block;
    margin: 0;
    vertical-align:top;
}

jsFiddle example

默认的垂直对齐值是基线，这就是您所看到的。

【讨论】：

感谢您的回答！