html - 为什么我在图像上方有额外的空间？

Question

我想像我的示例一样向下移动红色 div，但我仍然在图像 div(第二类)上方有额外的空间，就像红色 div 仍在页面顶部一样。

我怎样才能更好地解决这个问题？我不想使用绝对位置，因为我的网站是响应式的，并且将图像 div(第二类)设置为 top: -50px 听起来是个糟糕的解决方案。

    .one {
      top: 100px;
      position: relative;
      width: 100px;
      height: 50px;
      background-color: red;
    }

    <div class="one">Some text</div>
    <div class="two">
    <img src="http://via.placeholder.com/350x350">
    </div>

Answer 1

    .one {
      top: 100px;
      position: relative;
      width: 100px;
      height: 50px;
      background-color: red;
      margin-bottom: -50px;
    }

    <div class="one">Some text</div>
    <div class="two">
    <img src="http://via.placeholder.com/350x350">
    </div>