固定大小的图像占位符空白

Question

我只是想知道如何在固定大小的HTML页面上插入空格。例如：

<div width="48" height="48"></div>

但这不起作用。所以我尝试添加一个没有像这样的源的图像标签：

<img width="48" height="48">

虽然有效，但有一个48x48的正方形，里面没有任何东西，因为没有图像源。我尝试使用CSS将边框更改为0像素，并将其颜色设置为白色，但它不起作用，并且方块保持不变。

然后我尝试使用break标签，但问题是我不能有一个确切的48x48空白空间。

如何在页面中插入固定大小的空格？

如果您想知道我为什么要添加空格。这是因为在那个白色空间中，稍后出现一个小图像，当它出现时，所有那些东西向下移动以为图像腾出空间，但我不希望事情像这样移动。所以我想插入一个与我的图像大小相同的空白区域，然后用图像替换空格。

我将把空格放在div中，然后使用.innerHTML更改div标签之间的代码，用图像替换空格。

Answer 1

您可以使用名为Placehold.it的服务

<img src="http://placehold.it/500x200" />

或为它编写自定义CSS ..

.virtualPlaceholder {
    display:block;
    height:500px;
    width:500px;
    background:#eee;
}

此处示例：http://jsfiddle.net/rahulrulez/7Ufn6/

Answer 2

使用 CSS 样式 white-space: pre;

实际上，您可以在代码中添加空格并将它们应用到您的页面上。 因此，您可以根据需要添加任意数量的空格，直到获得所需的长度。

示例（html）：

<h2 class="addWhiteSpace">
                A                    B the white-space between A and B will be applied in the page.
            </h2>

CSS：

.addWhiteSpace{
    white-space: pre;
}