转换元素后如何删除空格？答案

【问题标题】：How can I remove the white space after transforming an element?转换元素后如何删除空格？
【发布时间】：2021-08-07 12:56:07
【问题描述】：

我遇到了一个问题。我检查了很多其他 StackOverflow 线程，但没有一个适用于我的场景。所以，基本上，我有两个divs，一个在另一个之上转换了一个指定的值。但是，转换后的 div 和我要删除的 h1 文本之间有很多空白。

这是我的代码：

.div1,
.div2 {
  height: 200px;
}

.div1 {
  background-color: aqua;
  width: 200px
}

.div2 {
  width: 190px;
  transform: translateY(-20%);
  background-color: purple;
  z-index: 10;
}

<div class="div1"></div>
<div class="div2"></div>
<h1>Hello</h1>

我附上了一张空白的图片以便更好地理解： https://i.stack.imgur.com/50uAi.png

任何解决方案都将受到高度赞赏！

【问题讨论】：

请阅读How to Ask，上面写着“如果可以创建一个您可以链接到的问题的实时示例（例如，在sqlfiddle.com 或jsbin.com），然后执行所以 - 但也将代码复制到问题本身。不是每个人都可以访问外部站点，并且链接可能会随着时间的推移而中断。使用Stack Snippets 制作内联 JavaScript / HTML / CSS 的现场演示。”

标签： html css transform

【解决方案1】：

希望，这有助于在减号中添加 margin-top 然后您可以在空白处调整对齐方式

.div1, .div2 {
  height: 200px;
}

.div1 {
  background-color: aqua;
  width: 200px
}

.div2 {
  width: 190px;
  transform: translateY(-20%);
  background-color: purple;
  z-index: 10;
}

h1 {
    margin: -32px 0 0 0;
}

<div class="div1"></div>
<div class="div2"></div>
<h1>Hello</h1>

【讨论】：

【解决方案2】：

大部分空白来自标题周围的空白，您可以使用此 css 代码将其删除：

h1 {
    margin: 0;
}

您还可以在第二个框的底部添加一个负边距，您可以通过计算框高度的20% 得到（参见this post 以了解css 变量的说明。

:root {
  --box-height: 200px;
}

h1 {
  margin: 0;
}

.div1,
.div2 {
  height: var(--box-height);
}

.div1 {
  background-color: aqua;
  width: var(--box-height);
}

.div2 {
  width: calc(var(--box-height) - 10px);
  transform: translateY(-20%);
  margin-bottom: calc(-0.2 * var(--box-height));
  background-color: purple;
}

<div class="div1"></div>
<div class="div2"></div>
<h1>Hello</h1>

【讨论】：

【解决方案3】：

调整 margin css 属性将改变元素之间的间距 padding 是元素边框之间的间距但具有类似的效果。

h1{
/*      top right bottom Left  */
margin: -15px 0px 0px 0px;
padding: -15px 0px 0px 0px;
}

【讨论】：