时间戳

首页 > 解决方案 > 转换元素后如何删除空格？

html - 转换元素后如何删除空格？

问题描述

我面临一个问题。我检查了很多其他 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

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

标签： htmlcsstransform

解决方案

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

h1 {
    margin: 0;
}

您还可以在第二个框的底部添加一个负边距，您可以通过计算20%框的高度来获得该​​值（有关 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>

推荐阅读