无法在div元素下方删除空格

Question

我正在创建类似聊天的应用程序。在时间戳下面有一个空格，我无法删除它。

.message {
    white-space: pre-wrap;
}

.message-avatar {
    float: left;
    margin 5 px 14px 0 0;
}

  .message-from {
    display: inline-block;
    padding-left: 8px;
  }

  .message-timestamp {
    display: inline-block;
    font-size: 12px;
  }

  .message-body {
    display: inline-block;
    padding: 4px 0 0 8px;
    word-break: break-all;
  }

<div class="message">
    <v-img class="message-avatar" src="..."></v-img>
    <small class="message-from">User</small>
    <div class="message-timestamp"></div>
    <div></div>
    <div class="message-body"></div>
</div>

如何删除它？它仅出现在message-timestamp下方，并且我没有在元素下方设置任何边距和填充。

更新

我发现了一个东西。 timestamp之后的空格可能是空格。至少在控制台上，它显示为空格。我可以在控制台上手动删除它，所以我尝试仅删除空格，但是无法以编程方式执行。

Answer 1

我不确定您要完成什么外观，但似乎您有一些竞争风格。如果您摆脱了预包装，并且内联块显示消失，您的空白将消失。

请参阅此暂存器示例： http://scratchpad.io/stormy-toys-7510

Answer 2

过去，我遇到过类似的问题，我通常尝试使用一些CSS Flex来操纵它。

.message {
    white-space: pre-wrap;
}

.message-avatar {
    float: left;
    margin 5 px 14px 0 0;
}

.message-fix {
    padding: 0;
    border: 0;
    display: flex;
    flex-direction: row;
}

  .message-from {
    display: inline-block;
    padding-left: 8px;
  }

  .message-timestamp {
    display: inline-block;
    font-size: 12px;
  }

  .message-body {
    display: inline-block;
    padding: 4px 0 0 8px;
    word-break: break-all;
  }

<div class="message">
    <v-img class="message-avatar" src="..."></v-img>
    <div class="space-fix">
        <small class="message-from">User</small>
        <div class="message-timestamp"></div>
    </div>
    <div></div>
    <div class="message-body"></div>
</div>

此外，尝试使用JavaScript修剪DOM元素的值。

Answer 3

您可以尝试以下方法：

CSS ：

.message-timestamp::after {
    display: none;
}