Как вставлять пробелы/табуляции в текст с помощью HTML/CSS

Чтобы вставить tab space между двумя словами/предложениями, я обычно использую

  и  

В случаях, когда ширина/высота пространства превышает  , я обычно использую:

Для горизонтальной проставки:

<span style="display:inline-block; width: YOURWIDTH;"></span>

Для вертикальной проставки:

<span style="display:block; height: YOURHEIGHT;"></span>

Вы можете использовать   для пробелов, < для < (меньше чем, номер объекта <) и > для > (больше чем, номер объекта >).

Полный список можно найти на странице HTML-сущности.

Попробуйте  .

Согласно документации по Специальные символы:

Объекты символов   и   обозначают пробел en и em пробел соответственно, где пробел en составляет половину размера пункта, а пробел em равен размеру пункта текущего шрифта. Для шрифтов с фиксированным шагом пользовательский агент может трактовать пробел en как эквивалентный символу пробела, а пробел em как эквивалентный двум символам пробела.

Типы Spaces в HTML

Создает четыре пробела между текстом-  

Создает два пробела между текстом -  

Создает обычный пробел между текстом -  

создает узкое пространство (похоже на обычное пространство, но с небольшим отличием - "&thinsp";

интервал между предложениями - "</br>"

Эта ссылка может вам помочь. Посетите [https://hea-www.harvard.edu/~fine/Tech/html-sentences.html]

Мне нравится использовать это:

В вашем CSS:

.tab { 
       display:inline-block; 
       margin-left: 40px; 
}

В вашем HTML:

<p>Some Text <span class="tab">Tabbed Text</span></p>

<p style="text-indent: 5em;">
The first line of this paragraph will be indented about five characters, similar to a tabbed indent.
</p>

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

См. Как использовать HTML и CSS для создания вкладок и интервалов для получения дополнительной информации.

Сделайте шаг вперед, чем @Ivar, и стилизуйте свой собственный тег так... Мне легче запомнить и набрать «вкладку».

tab {
    display: inline-block;
    margin-left: 40px;
}

И реализация HTML...

<p>Left side of the whitespace<tab>Right side of the whitespace</p>

И мой скрин...

<span style="padding-left:68px;"></span>

Вы также можете использовать:

padding-left
padding-right
padding-top
padding-bottom

Также называется фиксированным пространством или жестким пространством, неразрывным пространством (NBSP) используется в программировании и обработке текстов для создания пробела в строке, который нельзя разорвать переносом слов.

В HTML   позволяет создавать несколько пробелов, видимых на веб-странице, а не только в исходном коде.

Если вы запрашиваете вкладки для выравнивания элементов в некоторых строках, вы можете использовать <table>.

Помещение каждой строки в <tr> ... </tr>. И каждый элемент внутри этой строки в <td> ... </td>. И, конечно же, вы всегда можете контролировать заполнение каждой ячейки таблицы, чтобы регулировать расстояние между ними.

Это выровняет их, и они будут выглядеть довольно красиво :)

Вы можете использовать отступы, такие как <span style="padding-left: 20px;">, вы можете посмотреть другие способы здесь - пустое место в html

Используйте стандартный CSS tab-size.

Чтобы вставить символ табуляции (если стандартная клавиша табуляции, переместите курсор), нажмите Alt + 0 + 0 + 9

.element {
    -moz-tab-size: 4;
    tab-size: 4;
}

Мои предпочтения:

*{-moz-tab-size: 1; tab-size: 1;}

Взгляните на фрагмент или быстро найденный пример по адресу tab-size.

.t1{
    -moz-tab-size: 1;
    tab-size: 1;
}
.t2{
    -moz-tab-size: 2;
    tab-size: 2;
}
.t4{
    -moz-tab-size: 4;
    tab-size: 4;
}
pre {border: 1px dotted;}

<h3>tab = {default} space</h3>
<pre>
	one tab text
		two tab text
</pre>

<h3>tab = 1 space</h3>
<pre class="t1">
	one tab text
		two tab text
</pre>

<h3>tab = 2 space</h3>
<pre class="t2">
	one tab text
		two tab text
</pre>

<h3>tab = 4 space</h3>
<pre class="t4">
	one tab text
		two tab text
</pre>

Белое пространство? Не могли бы вы просто использовать прокладку? Это идея. Вот как вы можете добавить «пустую область» вокруг вашего элемента. Таким образом, вы можете использовать следующие теги CSS:

padding: 5px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;

Вы можете использовать этот код  , чтобы добавить пробел в содержимое HTML. Для табуляции используйте его 5 или более раз.

Посмотрите пример здесь: https://www.w3schools.com/charsets/tryit.asp?deci=8287&ent=ThickSpace

Это сработало для меня:

В моем CSS у меня есть:

tab0  { position:absolute;left:25px;  }
tab1  { position:absolute;left:50px;  }
tab2  { position:absolute;left:75px;  }
tab3  { position:absolute;left:100px; }
tab4  { position:absolute;left:125px; }
tab5  { position:absolute;left:150px; }
tab6  { position:absolute;left:175px; }
tab7  { position:absolute;left:200px; }
tab8  { position:absolute;left:225px; }
tab9  { position:absolute;left:250px; }
tab10 { position:absolute;left:275px; }

Затем в HTML я просто использую свои вкладки:

Dog Food <tab3> :$30
Milk <tab3> :$3
Pizza Kit <tab3> :$5
Mt Dew <tab3> :$1.75

ответ user8657661 ближе всего для моих нужд (выстраивания вещей в несколько строк). Однако мне не удалось заставить код примера работать, как указано, и мне нужно было изменить его следующим образом:

<html>
    <head>
        <style>
            .tab9 {position:absolute;left:150px; }
        </style>
    </head>

    <body>
        Dog Food: <span class="tab9"> $30</span><br/>
        Milk of Magnesia:<span class="tab9"> $30</span><br/>
        Pizza Kit:<span class="tab9"> $5</span><br/>
        Mt Dew <span class="tab9"> $1.75</span><br/>
    </body>
</html>

Если вам нужны числа, выровненные по правому краю, вы можете изменить left:150px на right:150px, но вам нужно будет изменить число в зависимости от ширины экрана (как написано, числа будут в 150 пикселях от правого края экрана).

Вот текст "Вкладки" (скопируйте и вставьте): " "

Она может выглядеть иначе или не быть полной из-за ограничений ответов на этом сайте.