html - 删除彼此下的 2 个 div 元素之间的 “whitespace”

Question

.div-1 {
  background-color: #deb887;
  margin: 0 auto;
  width: 100%;
  height: auto;
  display: inline-block;
}

.div-2 {
  background-color: #87ceeb;
  margin: 0 auto;
  width: 100%;
  padding: 32px 0;
  text-align: center;
}

<div class="div-1">..... some code here </div>
<div class="div-2">..... some code here</div>

两个div之间有一个空白，一个在另一个div下面我找到了这个问题的一些解决方案，但它们不起作用。

1. 垂直对齐:顶部； ----- 不工作
2. 行高:0px； ------ 影响div的文字

3. 字体大小:0px； ------- 对文本也有影响

   1. *{ margin :0；填充:0；------------------ 不工作

请帮助，在此先感谢。

Answer 1

.div-1{
    display: block;
    width: 100%;
    background-color: #deb887;
    margin: 0 auto;
    height: auto;
}

.div-2 {
    height: 10px;
    vertical-align: top;
    background-color: #87ceeb;
    margin: 0 auto;
    width: 100%;
    padding: 32px 0;
    text-align: center;
}