如何删除块之间的距离

Question

我有这些积木。 enter image description here

如何让左边的方块高于右边的方块并消除它们之间的距离？这是 css:

.cnt {
  padding:20px;
  margin-top:20px;
  margin-bottom:10px;
  background: rgba(255, 255, 255, .5);
  overflow:hidden;
  box-shadow: 0 10px 90px rgba(0, 0, 0, 0.4);
}

@media only screen and (min-width : 480px) {
  .cnt {
    height: auto;
  }
}

@media only screen and (min-width : 768px) {
  .cnt {
    height: 452px;
    padding: 30px;
  }
}    
@media all and (max-width: 1170px) {
    .cnt {
        height: 380px;
    }
}

这是html:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="col-md-6  col-xs-12">
  <div class="cnt"></div>
</div>                                   
<div class="col-md-6  col-xs-12">
  <div class="cnt"></div>
</div>

这些块是响应式的，并且在移动版本中彼此重叠。问题是我无法消除它们之间的距离。我该如何解决？

Answer 1

您可以像这样覆盖默认值 Bootstrap css，默认情况下 classes col-md-6 和 col-xs-12 将具有填充和边距，这会导致你说的距离。并且还从 .cnt class:-

中删除边距

.col-md-6, .col-xs-12{
   padding: 0 !important;
   margin: 0 !important;
}

Answer 2

只需从 .cnt class 中删除 margin-top:20px;margin-bottom:10px; ！这是主要问题

Answer 3

您应该使用 bootstrap classes 删除块之间的填充和边距：

https://getbootstrap.com/docs/4.3/utilities/spacing/

我添加到你的代码 classes pr-md-0 和 pl-md-0 mr-md-0 和 ml-md-0 什么意思:

pr-md-0（中型设备的填充权等于 0）

pl-md-0（中等设备的左填充等于 0）

mr-md-0（中等设备的margin right等于0）

ml-md-0（中型设备的剩余边距等于 0）

此更改适用于它们之间的左右 space，但如果您想摆脱 space 顶部和底部，您应该添加不同的 classes，例如： mt-0 mb-0 pt-0 pb-0

什么意思：

mt-0 - margin top to 0

pt-0 - 顶部填充到 0

mb-0 - 保证金底部为 0

pb-0 - 底部填充到 0

对于每个块的不同高度，你应该给不同的 classes 而不是使用相同的 class cnt 例如添加 cnt1 和 cnt2 class 如下例所示：

<!DOCTYPE html>

<html>
    <head>

    <style>
    .cnt {
  padding:20px;
  margin-top:20px;
  margin-bottom:10px;
  background: rgba(255, 255, 255, .5);
  overflow:hidden;
  box-shadow: 0 10px 90px rgba(0, 0, 0, 0.4);
}

@media only screen and (min-width : 480px) {
  .cnt {
    height: auto;
  }
}

@media only screen and (min-width : 768px) {
  .cnt {
    padding: 30px;
  }
  .cnt1 {
    height: 552px;
  }

  .cnt2 {
    height: 452px;
  }
}
@media all and (max-width: 1170px) {
  .cnt1 {
    height: 480px;
  }

  .cnt2 {
    height: 380px;
  }
 }
    </style>
    </head>
    <body>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <div class="container">
        <div class="row">
            <div class="col-md-6  col-xs-12 mr-md-0 pr-md-0 ">
          <div class="cnt cnt1 mb-0 mt-md-4">

          </div>
        </div>                                                                 

        <div class="col-md-6  col-xs-12 ml-md-0 pl-md-0 ">
          <div class="cnt cnt2 mt-0 mt-md-4">

          </div>
        </div>  
        </div>
    </div>  
</body>
</html>

边距和边距

Answer 4

更改此 CSS 然后删除块之间的距离：

.cnt {
    padding:auto;
    margin-top:auto;
    margin-bottom:auto;
    background: rgba(255, 255, 255, .5);
    overflow:hidden;
    box-shadow: 0 10px 90px rgba(0, 0, 0, 0.4);
}

如何删除块之间的距离

How to remove distance between blocks

html

css

responsive