边界中奇怪的空间

Question

.cardboard-window {
  color: white;
  margin: auto;
  resize: both;
  display: inline-block;
  box-sizing: border-box;
  border: 8px solid;
  border-image: url("https://sites.google.com/site/drawalbumimages/imgs/cardboard window.png");
  border-image-slice: 1 1 3 1 fill;
  border-width: 4px 4px 12px 4px;
  border-image-repeat: repeat;
  image-rendering: pixelated;
}

<div style="position:absolute; margin:0; top:100%; transform:translateY(-150%);" class="cardboard-window">
  Window stuff...
</div>

当我使用.cardboard-window时，在transform:translate(...)中出现了一个非常奇怪的不可见空间：

我该如何解决？

Answer 1

在设置border image时，您可以对其进行切片以适合您的需求，因此我相信空格来自切片操作。 我找不到通过修改边框来解决此问题的方法，但是在您的特定情况下，您可以将div的背景颜色设置为＃c08f4f。

如果设置背景颜色不适合您，请尝试以下操作：

.cardboard-window {
  color: white;
  margin: auto;
  resize: both;
  display: inline-block;
  box-sizing: border-box;
  border: 8px solid;
  border-image: url("https://sites.google.com/site/drawalbumimages/imgs/cardboard window.png");
  border-image-slice: 1 1 3 1 fill;
  border-width: 4px 4px 12px 4px;
  border-image-repeat: repeat;
  image-rendering: pixelated;
}
	
.message-container{
  position: absolute;
  margin: 0;
  top: 100%;
  transform: translateY(-150%);
  height: 34px;
}

<div class="message-container">
  <div class="cardboard-window">
    Window stuff...
  </div>
</div>