删除两个div元素之间的“空白”

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>

2格之间有一个空白，一个又一个 我找到了解决此问题的方法，但是它们不起作用。

1. vertical-align：top; -----不起作用
2. line-height：0px; ------它会影响div的文本

3. font-size：0px; -------它还会影响文本

   1. * { 保证金：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;
}

Answer 2

尝试这种方式：

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

请注意注释语法