div上面有这个奇怪的边缘。我该如何解决？

Question

希望你一切安好。

我有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%;} 

Answer 1

这不是边距，它是垂直对齐。只需添加垂直对齐：顶部到您的内容类：

.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

默认垂直对齐值为基准，也就是你看到的。

Answer 2

查看更新的小提琴。

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