Question

我想像我的例子一样向下移动红色div，但我仍然在图像div（第二类）上方获得额外的空间，就像红色div仍然在页面顶部。

如何以更好的方式解决这个问题？我不想使用绝对位置，因为我的网站响应并将Image div（第二类）设置为top: -50px听起来像是一个糟糕的解决方案。

＆＃13;

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

＆＃13;

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

＆＃13;

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>

为什么我会在图像上方留出额外的空间？

1 个答案: