内联元素之间的空白崩溃

Question

以下将红框放在右侧：

.wrap {
  outline: 1px solid green;
}

.wrap:before {
  content: " ";
  margin: 0 -50px 0 100%;
}

.box {
  display: inline-block;
  width: 50px;
  height: 50px;
  background: red;
}

<div class="wrap">
  <div class="box">Box</div>
</div>

但是如果将content值设置为空字符串，即content: "";，则红色框不再保留在Webkit浏览器的右侧，例如铬。到底发生了什么？它是Webkit或其他浏览器中的错误吗？

Answer 1

如果您想在不更改其显示属性的情况下移动右侧的框，则至少有两种方法可以执行此操作：

第一个选项
1）从.wrap:before内容中删除空格
2）在.wrap和.box：

之间添加评论

<div class="wrap"><!--
  --><div class="box">Box</div>
</div>

第二个选项
使用以下CSS：

.wrap {
  outline: 1px solid green;
  text-align: right;
}

.box {
  display: inline-block;
  width: 50px;
  height: 50px;
  background: red;
  text-align: left;
}