Question

在标准块显示div中通过伪类添加背景图像时：

.outer {
    background-color: red;
    text-align: center;
}
.outer:before {
    background-color: blue;
    display: inline-block;
    width: 200px;
    height: 200px;
    content: " ";
}

外部div最终在相对于所包含的：before元素的底部被填充了几个px。有可能避免这种情况吗？如果content被非空文本替换，则填充消失，但是我需要一种使文本不可见的方法。

http://jsfiddle.net/7Ja5d/

Answer 1

你有2种方法可以摆脱那个空间。 （你生成的盒子站在基线上，就像文本一样。它为以下字母留出空间：g，j，p，q，y）。

将vertical-align:top或bottom设置为您的内联框 http://jsfiddle.net/7Ja5d/2/
将您的boxe设置为block http://jsfiddle.net/7Ja5d/1/

Answer 2

因为你的内部元素是一个内联块，所以它正在观察行高的样式，所以只需设置：

.outer{ line-height: 0; }

http://jsfiddle.net/7Ja5d/5/

希望有所帮助

Answer 3

将高度添加到.outer并将pesudo height设置为100％http://jsfiddle.net/7Ja5d/8/

    .outer {
      background-color: red;
      text-align: center;
      height: 200px;
    }

    .outer:before {
      background-color: blue;
      display: inline-block;
      width: 200px;
      height: 100%;
      content: " ";
    }

此外，如果你想让文字不可见，只需设置＆＃34;颜色：透明;＆＃34;

防止用空内容填充包装的伪元素

3 个答案: