Як вставити пробіли / вкладки в текст за допомогою HTML / CSS

Можливі способи:

<pre> ... </pre>

або

style="white-space:pre"

Щось іще?

Для вставлення tab spaceміж двома словами / реченнями я зазвичай використовую

  і  

У випадках, коли ширина / висота простору перевищує,  я зазвичай використовую:

Для горизонтального розпірки:

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

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

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

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

Повний список можна знайти в HTML Entities .

Спробуйте  .

Відповідно до документації на спеціальних символах :

Суб'єкти символів  і  позначають простір en і em відповідно, де en проміжок становить половину розміру точки, а em-простір дорівнює розміру точки поточного шрифту. Для шрифтів з фіксованим тоном користувальницький агент може розглядати простір en як еквівалентний символу пробілу, а простір em як еквівалентний двом символам пробілу.

Мені подобається використовувати це:

У вашому CSS:

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

У вашому HTML:

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

Типи SpacesHTML

Створює чотири пробіли між текстовими-  

Створює два проміжки між текстом -  

Створює звичайний пробіл між текстом -  

створює вузький простір (подібний до звичайного простору, але незначна різниця - "&thinsp";

інтервал між реченнями - "</br>"

Це посилання може допомогти вам. Перевірте [ https://hea-www.harvard.edu/~fine/Tech/html-sentences.html]

<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 для створення вкладок та пробілів для отримання додаткової інформації.

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

Ви також можете використовувати:

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

Зайдіть на крок далі, ніж @Ivar, і сформулюйте власний власний тег на зразок цього… Для мене «вкладку» простіше запам’ятати та набрати.

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

І реалізація HTML ...

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

І мій скріншот ...

Якщо ви просите вкладки, щоб вирівняти речі в деяких рядках, ви можете використовувати <table>.

Введення кожного рядка <tr> ... </tr>. І кожен елемент всередині цього рядка в <td> ... </td>. І звичайно, ви завжди можете контролювати прокладку кожної комірки таблиці, щоб регулювати простір між ними.

Це зробить їх вирівняними, і вони будуть виглядати досить приємно :)

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

За допомогою HTML  дозволяє створювати декілька пробілів, які видно на веб-сторінці, а не лише у вихідному коді.

Білий простір? Не могли б ви просто використовувати накладки? Це ідея. Ось так ви можете додати деяку "порожню область" навколо свого елемента. Отже, ви можете використовувати такі теги 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 tab-size .

Щоб вставити символ вкладки (якщо стандартна клавіша вкладки, перемістіть курсор), натисніть Alt+ 0+ 0+9

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

Мої переваги:

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

Подивіться фрагмент чи швидко знайдений приклад у розмірі вкладки .

.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:

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

відповідь користувача8657661 найбільш близький до моїх потреб (про складання речей у декілька рядків). Однак я не зміг змусити приклад коду працювати як надано, але мені потрібно було змінити його так:

<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 пікселів від правого краю екрану).

Ви можете це зробити через padding, як <span style="padding-left: 20px;">, ви можете перевірити більше способів тут - порожній простір у HTML

Ось текст "Tab" (скопіюйте та вставте): ""

Зважаючи на обмеження відповідей на цьому веб-сайті, це може відображатися на різних вкладках чи не повністю.