Question

<div style="border:8px solid purple;height:500px;position:relative;">
  <div style="display:inline-block;bottom:0;width:100%;position:absolute;border:5px solid black;">
    <div style="display:inline-block;border:1px solid red;width:100%;position:relative;">
      TEXT INSIDE RED BORDER DIV
    </div>
    <div style="display:inline-block;border:4px solid yellow;height:20px;width:100%;position:relative;transform:translateY(50%);">
      TEXT INSIDE YELLOW BORDER DIV
    </div>
    <div style="display:inline-block;border:4px solid blue;height:50px;width:100%;">

    </div>
  </div>
</div>

我不希望div里面有“TEORD INSIDE RED BORDER DIV”文本和div里面有“TEORD INSIDE YELLOW BORDER DIV”的空格。但他们之间有一个空间。似乎transform:translateY(50%);这样做。

为什么红色div不会自动向下移动，从而导致黄色div之间的空间？

Answer 1

从黄色边框div中删除transform: translateY(50%);，它将删除空格

<div style="border:8px solid purple;height:500px;position:relative;">
  <div style="display:inline-block;bottom:0;width:100%;position:absolute;border:5px solid black;">
    <div style="display:inline-block;border:1px solid red;width:100%;position:relative;">
      TEXT INSIDE RED BORDER DIV
    </div>
    <div style="display:inline-block;border:4px solid yellow;height:20px;width:100%;position:relative;">
      TEXT INSIDE YELLOW BORDER DIV
    </div>
    <div style="display:inline-block;border:4px solid blue;height:50px;width:100%;">

    </div>
  </div>
</div>

Answer 2

连接的笔甚至不是相同的代码，抱歉，如果没有这个，我们无法提供很多帮助。

但是，也许这会解决你的问题，在CSS中，内联块属性将元素放在其他元素之后，但由于字体大小而占用空间。

如果您将所有元素的字体大小设置为：0并在div中重新设置正确的字体大小，则空格将消失（通常）

垂直对齐div，它们之间没有任何空格

2 个答案: