Я просто хочу знать, как я могу вставить пробел на HTML-страницу с фиксированным размером. Например что-то вроде этого:

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

Но это не работает. Поэтому я попытался добавить тег изображения без такого источника:

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

Это сработало, но был квадрат 48x48, внутри которого ничего не было, так как нет источника изображения. Я попытался использовать CSS, чтобы изменить границу на 0 пикселей и установить ее цвет на белый, но это не работает, и квадрат остается.

Затем я попытался использовать теги разрыва, но проблема с ними в том, что у меня не может быть точного пустого пространства 48x48.

Как можно вставить на страницу пустое пространство фиксированного размера?

И если вам интересно, почему я хочу добавить пустое пространство. Это потому, что в этом пустом пространстве позже появляется небольшое изображение, и когда оно появляется, все, что было там, перемещается вниз, чтобы освободить место для изображения, но я не хочу, чтобы что-то двигалось вот так. Итак, я хочу вставить пробел того же размера, что и мое изображение, а затем заменить пробел изображением.

Я собираюсь поместить пространство в div, а затем использовать .innerHTML, чтобы изменить код между тегами div, чтобы заменить пространство изображением.

1
Uncle Nigworth 17 Май 2014 в 14:36

2 ответа

Лучший ответ

Вы можете использовать сервис под названием Placehold.it

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

Или напишите для него собственный CSS ..

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

Пример здесь: http://jsfiddle.net/rahulrulez/7Ufn6/

2
Rahul Patil 17 Май 2014 в 10:44

Использовать стиль 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;
}
0
gopal prabhu 5 Янв 2021 в 17:53