У цій статті ми дізнаємося, як додавати пробіли/табуляції в тексті за допомогою 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="/java-arraylist/">Java-Arraylist</a> </li><li> <a href="/aws-tutorial/">Підручник З Aws</a> </li><li> <a href="/cpp-string/">Cpp-Рядок</a> </li><li> <a href="/commerce-types/">Комерція - Види</a> </li><li> <a href="/cpp-examples/">Приклади Cpp</a> </li><li> <a href="/physics-class-12-cat/">Фізика-Клас-12</a> </li><li> <a href="/php-tutorial/">Підручник Php</a> </li><li> <a href="/news/">Новини</a> </li><li> <a href="/c-keyword/">C Ключове Слово</a> </li><li> <a href="/mysql/">Mysql</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">MySQL VARCHAR</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> MySQL VARCHAR з посібником з mysql, прикладами, функціями, програмуванням, mysql, літералами, курсором, процедурою, regexp_like(), оператором regexp_replace, регулярним виразом, crud тощо.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/mysql-varchar"> <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="/talk-vs-talk-with-difference-between-talk">Розмовляти з проти Розмовляти з | Різниця між «Поговорити з» і «Поговорити з».</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/surface-area-circle-formula">Формула площі поверхні кола</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-full-form-pvr">Що таке повна форма PVR</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/test-optional-colleges-131612">Тест-факультативні коледжі: повний список із 900+ шкіл</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-full-form-ssh">Що таке повна форма SSH</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="/kali-linux-terminal">термінал kali linux</a>
</li><li><a href="/java-convert-int-string">перевести в рядок</a>
</li><li><a href="/c-array-structures">структури з використанням масивів у c</a>
</li><li><a href="/c-dereference-pointer">покажчик розіменування c</a>
</li><li><a href="/java-string-replaceall">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="//da.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>