Question

在开发程序化情绪板生成器时，我遇到了 CSS 渲染问题。

这是一个以红色方块显示有问题元素的屏幕（您可能需要打开图像并放大全尺寸才能理解）：

div 上限和内容之间有半个像素的空间，所以我们可以看到背景图像溢出。它对某些颜色（如红色）也有同样的作用。有点完美主义，因为它是一种视觉工具，我真的很喜欢干净的渲染。

这是一个带有示例的代码笔： Codepen link to the HTML / CSS code

.moodboard {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  box-sizing: border-box;
  line-height: 4em;
  position: relative;
}

.whiteborder {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100vw;
  box-sizing: border-box;
  content: '';
  border: solid white;
  border-width: 0.8em;
  z-index: 20;
}

.color,
.image,
.font {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.content {
  position: absolute;
  border: solid white;
  border-width: 0.8em;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-size: cover;
  background-position: center center;
  z-index: 2;
}

.font .content {
  border: 0 solid transparent;
  font-size: 5em;
  font-weight: bold;
  z-index: 10;
  padding: 0.2em;
  text-shadow: 2px 2px 0px rgba(255, 255, 255, 1);
}

.image .content {
  background-color: whitesmoke;
}

.line {
  display: table;
  width: 100vw;
  border-collapse: collapse;
}

.line div {
  display: table-cell;
}

<section class="moodboard relative">
  <span class="whiteborder"></span>
  <article class='line' style='height: 33.333333333333vh'>
    <div class='font'>
      <span class='content' style='font-family: &quot;Seaweed Script&quot;, cursive'>Lorem Ipsum</span>
    </div>
    <div class='color'>
      <span class='content' style='background-color: rgb(239, 152, 170) ; height: 100%;width : 100%;'></span>

    </div>
    <div class='color'>
      <span class='content' style='background-color: rgb(250, 231, 181) ; height: 100%;width : 100%;'></span>

    </div>
    <div class='color' style="min-width:0 ;">
      <span class='content' style='background-color: rgb(197, 208, 230) ; height: 42vh;width : 42vh;border-radius:50%; z-index:3;'></span>

    </div>
  </article>
  <article class='line' style='height: 33.333333333333vh'>
    <div class='font'>
      <span class='content' style='font-family: &quot;Dancing Script&quot;, cursive'>Lorem Ipsum</span>
    </div>
    <div class='image'>
      <span class='content' style=' background-color:red;height:50vh;width : 100%;'></span>
    </div>
    <div class='font'>
      <span class='content' style='font-family: &quot;Amatic SC&quot;, cursive'>Lorem Ipsum</span>
    </div>
    <div class='image'>
      <span class='content' style=' background-image: url(https://i.pinimg.com/originals/a6/ea/9b/a6ea9b7774c776f6d3e81c224a3550e2.jpg);height:58.333333333333vh;width : 100%;'></span>
    </div>
  </article>
  <article class='line' style='height: 33.333333333333vh'>
    <div class='image'>
      <span class='content' style=' background-image: url(https://i.pinimg.com/originals/a6/ea/9b/a6ea9b7774c776f6d3e81c224a3550e2.jpg);height:41.666666666667vh;width : 100%;'></span>
    </div>
    <div class='image'>
      <span class='content' style=' background-image: url(https://i.pinimg.com/originals/a6/ea/9b/a6ea9b7774c776f6d3e81c224a3550e2.jpg);height:66.666666666667vh;width : 100%;'></span>
    </div>
    <div class='color'>
      <span class='content' style='background-color: rgb(255, 188, 217) ; height: 100%;width : 100%;'></span>

    </div>
  </article>

</section>

对于带有内联样式的乱七八糟的 HTML 标签感到抱歉，但完整的显示结果来自后端脚本。

我在 Edge 上打开页面并获得相同的半像素空间。 Opera 也是一样，更糟糕的是，所有的 div 端都面临这个问题。所以可能是因为我在调整盒子尺寸时做错了什么？

我正在考虑在每个元素上添加一个白色的“假边框补丁”，用 :after 隐藏不需要的空间，但想在使用这样一个微不足道的解决方案之前问你...

是否有一些 CSS 属性或其他优雅的方式来删除边框前的这个空间？

Answer 1

移除 .content 类的边框属性

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-size: cover;
  background-position: center center;
  z-index: 2;
}

或者减小 border-width 属性的大小

.content {
  position: absolute;
  border: solid white;
  border-width: 1px;
  ...
}

边框和填充背景图像或颜色的内容之间不需要的空间

1 个答案: