转换元素后如何去掉白色的space？

Question

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

这是我的代码：

.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>

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

任何解决方案将不胜感激！

Answer 1

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

h1 {
    margin: 0;
}

您还可以在第二个框的底部添加一个负边距，您可以通过计算框高度的 20% 得到（参见 this post 对 [=25= 的解释） ]变量。

: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>

Answer 2

希望，这可以帮助您在减号中添加 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>

Answer 3

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

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

转换元素后如何去掉白色的space？

How can I remove the white space after transforming an element?

html

css

transform