У цій статті ми дізнаємося, як додавати пробіли/табуляції в тексті за допомогою HTML і CSS . Як ми знаємо, HTML за замовчуванням не підтримує більше одного пробілу, тому нам потрібні деякі додаткові атрибути або CSS, щоб отримати додатковий пробіл між текстом.
Ось такі підходи, за допомогою яких ми можемо додавати пробіли/табуляції в тексті:
Зміст
Використання сутностей HTML
- The символьна сутність використовується для позначення нерозривного пробілу, який є фіксованим пробілом. Це може сприйматися як удвічі більше звичайного простору. Він використовується для створення пробілу в рядку, який неможливо розірвати за допомогою переносу слів.
- The символьна сутність використовується для позначення пробілу «en», що означає розмір половини пункту поточного шрифту. Це може сприйматися як удвічі більше звичайного простору.
- The символьна сутність використовується для позначення пробілу «em», що означає дорівнює розміру поточного шрифту. Це може сприйматися як простір, що в чотири рази перевищує нормальний простір.
Синтаксис
// Regular space // Two spaces gap // Four spaces gap>
приклад: У цьому прикладі ми побачимо, як використовувати пробіли, і, будь ласка, не забудьте додати, , і &emsp у коді, де потрібно додати пробіл між текстом.
html Як вставити пробіли/табуляції в текст за допомогою HTML/CSS? заголовок> голова> <body> <h1 style='color: green'>techcodeview.comh1> <b>Як вставити пробіли/табуляції в текст за допомогою HTML/CSS?b><p>Це звичайний простір.p><p>Це два прогалини.p><p>Це чотири пробіли gap.p> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Вихід:</strong> </b> </p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/difference-between-left-join">ліве з’єднання проти правого з’єднання</a>
</blockquote> <img src='//techcodeview.com/img/css-questions/66/how-insert-spaces-tabs-text-using-html.webp' alt="char-entities"><h2 id='using-the-tabsize-property-in-css'> <b> <strong>Використання властивості tab-size у CSS</strong> </b> </h2><p dir='ltr'><span>The</span> <span>властивість tab-size у CSS</span> <span>використовується для встановлення кількості пробілів на кожному відображеному символі табуляції. Зміна цього значення дозволяє вставити необхідну кількість місця для одного символу табуляції. Однак цей метод працює лише з попередньо відформатованим текстом (за допомогою</span></p><pre class='hljs'> tags). The tab character can be inserted by holding the Alt and pressing 0 and 9 together. Syntax .tab { tab-size: value; /* for e.g: value = 2*/ } Example: In this example, we are going to implement the above-explained method. html <html> <head> <title>Як вставити пробіли/табуляції в текст за допомогою HTML/CSS? назва><style>.tab1 { розмір вкладки: 2; } .tab2 { розмір вкладки: 4; } .tab4 { розмір вкладки: 8; } стиль> голова> <body> <h1 style='color: green'>techcodeview.comh1> <b>Як вставити пробіли/табуляції в текст за допомогою HTML/CSS?b><pre class='hljs'zalupa>Це вкладка з 2 пробілами.pre><pre class='hljs'zalupa>Це вкладка з 4 пробілами.pre><pre class='hljs'zalupa>Це вкладка з 8 пробілами.pre> body> html> Вихід: використання спеціального CSS. Можна створити новий клас, який дає певний інтервал за допомогою властивості margin-left. Обсяг простору можна визначити кількістю пікселів, указаною в цій властивості. Для властивості display також встановлено значення «inline-block», щоб після елемента не додавався розрив рядка. Це дає простір для тексту та інших елементів. Синтаксис .tab { display: inline-block; margin-left: значення; /*, наприклад: value = 40px*/ } Приклад: у цьому прикладі ми збираємося реалізувати описаний вище метод. html<html> <head> <title>Як вставити пробіли/табуляції в текст за допомогою HTML/CSS? назва><style>.tab { дисплей: вбудований блок; поле зліва: 40 пікселів; } стиль> голова> <body> <h1 style='color: green'>techcodeview.comh1> <b>Як вставити пробіли/табуляції в текст за допомогою HTML/CSS?b><p>Це<span>span>простір табуляції в документі.p> body> html> Вихід:></pre></article>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
</div><!--//primary-->
<div class="secondary col-md-4 col-sm-12 col-xs-12">
<aside class="info aside section">
<div class="section-inner">
<h2 class="">Категорія</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/algorithms-misc/">Алгоритми-Різне</a> </li><li> <a href="/jpa-tutorial/">Підручник Jpa</a> </li><li> <a href="/heap/">Купа</a> </li><li> <a href="/algebra/">Алгебра</a> </li><li> <a href="/shell-scripting/">Сценарії Оболонки</a> </li><li> <a href="/excel/">Excel</a> </li><li> <a href="/binary-search/">Двійковий Пошук</a> </li><li> <a href="/c-input-output-quiz/">Вікторина C-Input And Output</a> </li><li> <a href="/cpu-scheduling/">Цп-Планування</a> </li><li> <a href="/ascii/">Ascii</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Фізичні Величини</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Фізичні Величини</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/physical-quantities/"> <i class="fa fa-external-link"></i> Читати Далі</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Цікаві Статті</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/how-much-are-10-000-steps-km">Скільки 10 000 кроків у км?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-tutorial">Підручник з Java</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/cpp-control-flow/">Cpp-Control-Flow</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/remove-character-from-string-javascript">Видалення символу з рядка в JavaScript</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/one-billion-lakhs">Один мільярд у лакхах</a> </strong> </span>
</li><!--//item-->
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="list music aside section">
<div class="section-inner">
<h2 class="heading">Популярні Пости</h2>
<div class="content">
<ul class="list"> <li><a href="/bias-variance-machine-learning">зміщення та дисперсія</a>
</li><li><a href="/java-string-format">рядковий формат</a>
</li><li><a href="/java-while-loop">цикл while java</a>
</li><li><a href="/java-switch-statement">метод перемикання java</a>
</li><li><a href="/t-flip-flop">t тригер</a>
</li><li><a href="/java-string-contains">рядок містить java</a>
</li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
</div><!--//secondary-->
</div><!--//row-->
</div><!--//masonry-->
<footer class="footer">
<div class="container text-center">
<span>
Copyright ©2025 Всі Права Захищені | <a href="//iw.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Відмова Від Відповідальності</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Про Нас</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Політика Конфіденційності</a> </span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
</body>
</html>