Question

希望你们都很好。

我有两个互相内联的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

它不是边距，而是垂直对齐。只需将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

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

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

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

2 个答案: