如何在CSS中使用宽度和填充创建的彩色框之间添加垂直间距？

zxlwwiss 于 2023-06-07 发布在其他

关注(0)|答案(1)|浏览(153)

所以我对WebDev很陌生，所以在这里和我一起：我创建了一个彩色正方形，宽度为70%，高度为0，填充为70%。我已经做了很多次，在网站上创建一个框网格。该框中有一个h2，其样式如下：

color: $white;
  position: absolute;
  bottom: -3%;
  margin-left: -0.5%;

盒子本身具有以下样式：

background-color: $primary;
  width: 70%;
  height: 0;
  padding-bottom: 70%;

现在这些盒子在高度上直接排列（我使用bootstrap为每行三个盒子），我如何在每个盒子之间垂直添加一个空间？
我试过使用一个保证金，但混乱的h2，并没有让我把它下来了，填充似乎没有做任何事情。
我的目标是有一个差距，每个框之间的垂直，我想添加一个单行p标签。
以下是完整的源代码：HTML：

.box-1-1 {
  background-color: $primary;
  width: 70%;
  height: 0;
  padding-bottom: 70%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.min.js" integrity="sha512-3dZ9wIrMMij8rOH7X3kLfXAzwtcHpuYpEgQg1OA4QAob1e81H8ntUQmQm3pBudqIoySO5j0tHN4ENzA6+n2r4w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div class="col-4">
  <div class="box-1-1">
    <h2 class="boxes">RDA EXPO</h2>
  </div>
  <div>
    <p>Lorem ipsum dolor sit amet</p>
  </div>
</div>

这是一个盒子，我这样做了12次，每行三个盒子

css

来源：https://stackoverflow.com/questions/76376105/how-can-i-add-vertical-spacing-between-colored-boxes-created-using-a-width-and

1条答案

按热度按时间

ac1kyiln1#

我强烈建议你在你的很多布局中使用网格。

div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 2px solid yellow;
}

我把你的代码替换成了css的代码，它在两个div周围放了一个盒子，并把它们放在一起。我不认为你所追求的是空的p标签来创造空间。你要做的是学习如何使用css属性来创建你想要的布局。传统的方法是使用float：左。新学校的方式是使用显示器：flex。最新的学校方式是使用display：所有这些都是非常需要学习的。

Floats
Flexbox
Grid
All three
了解这三种布局工具的基本工作原理将极大地帮助你掌握css知识。此外，本发明还提供了一种方法，
如何在每个框之间垂直添加空格？
如果使用grid或flex，则可以使用gap属性使项目在元素之间放置空间，包括垂直和水平方向。使用浮点数有点困难，但是有很多方法可以vertically position those too。
祝你好运

赞(0）回复(0）举报 2023-06-07

我来回答

如何在CSS中使用宽度和填充创建的彩色框之间添加垂直间距？

1条答案

相关问题

热门标签

最新问答