W tym artykule dowiemy się, jak dodawać spacje/tabulatory w tekście za pomocą HTML I CSS . Ponieważ wiemy, że HTML domyślnie nie obsługuje więcej niż jednej spacji, dlatego potrzebujemy dodatkowych atrybutów lub CSS, aby uzyskać dodatkową przestrzeń pomiędzy tekstem.
Oto następujące podejścia, za pomocą których możemy dodawać spacje/tabulatory w tekście:
Spis treści
Korzystanie z elementów HTML
- The Jednostka znakowa jest używana do oznaczenia spacji nierozdzielającej, która jest spacją stałą. Można to postrzegać jako dwukrotnie większą przestrzeń niż normalna przestrzeń. Służy do tworzenia spacji w wierszu, której nie można przerwać zawijaniem słów.
- The Jednostka znakowa służy do oznaczenia spacji „en”, co oznacza rozmiar połowy punktu bieżącej czcionki. Można to postrzegać jako dwukrotnie większą przestrzeń niż normalna przestrzeń.
- The Jednostka znakowa służy do oznaczenia spacji „em”, co oznacza równą wielkości punktowej bieżącej czcionki. Można to postrzegać jako czterokrotność przestrzeni normalnej.
Składnia
// Regular space // Two spaces gap // Four spaces gap>
Przykład: W tym przykładzie zobaczymy, jak używać spacji i nie zapomnij dodać, i &emsp w kodzie, w którym należy dodać spację między tekstem.
HTML Jak wstawiać spacje/tabulatory w tekście za pomocą HTML/CSS? tytuł> głowa> <body> <h1 style='color: green'>techcodeview.comh1> <b>Jak wstawiać spacje/tabulatory w tekście przy użyciu HTML/CSS?b><p>To jest zwykła spacja.p><p>To jest dwie spacje.p><p>To jest przerwa z czterema spacjami.p> treść> html>></pre> </code> <p dir='ltr'> <b> <strong>Wyjście:</strong> </b> </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/difference-between-left-join">łączenie lewe vs łączenie prawe</a>
</blockquote> <img src='//techcodeview.com/img/css-questions/66/how-insert-spaces-tabs-text-using-html.webp' alt="organizacje charytatywne"><h2 id='using-the-tabsize-property-in-css'> <b> <strong>Używanie właściwości tab-size w CSS</strong> </b> </h2><p dir='ltr'><span>The</span> <span>właściwość tab-size w CSS</span> <span>służy do ustawiania liczby spacji na każdym wyświetlanym znaku tabulacji. Zmiana tej wartości pozwala na wstawienie wymaganej ilości spacji na jednym znaku tabulacji. Ta metoda działa jednak tylko z wstępnie sformatowanym tekstem (przy użyciu</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>Jak wstawiać spacje/tabulatory w tekście za pomocą HTML/CSS? tytuł><style>.tab1 {rozmiar tabulatora: 2; } .tab2 { rozmiar tabulatora: 4; } .tab4 { rozmiar tabulatora: 8; } styl> głowa> <body> <h1 style='color: green'>techcodeview.comh1> <b>Jak wstawiać spacje/tabulatory w tekście przy użyciu HTML/CSS?b><pre class='hljs'zalupa>To jest zakładka z 2 spacjami.pre><pre class='hljs'zalupa>To jest zakładka z 4 spacjami.pre><pre class='hljs'zalupa>To jest zakładka zawierająca 8 spacji.pre> body> html> Dane wyjściowe: użycie niestandardowego CSS. Można utworzyć nową klasę, która zapewni określoną ilość odstępów, używając właściwości margines-lewy. Ilość miejsca może być określona przez liczbę pikseli określoną w tej właściwości. Właściwość display jest również ustawiona na „inline-block”, tak że po elemencie nie jest dodawany żaden podział wiersza. Dzięki temu przestrzeń może znajdować się obok tekstu i innych elementów. Składnia .tab { display: inline-block; margines po lewej: wartość; /* np.: wartość = 40px*/ } Przykład: W tym przykładzie zaimplementujemy metodę opisaną powyżej. HTML<html> <head> <title>Jak wstawiać spacje/tabulatory w tekście za pomocą HTML/CSS? tytuł><style>.tab {wyświetlacz: blok wbudowany; margines po lewej stronie: 40px; } styl> głowa> <body> <h1 style='color: green'>techcodeview.comh1> <b>Jak wstawiać spacje/tabulatory w tekście przy użyciu HTML/CSS?b><p>To jest<span>span>miejsce tabulatora w dokumencie.p>treść>html>Wyjście:></pre></article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </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="">Kategoria</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/c-operators/">C-Operatorzy</a> </li><li> <a href="/cheat-sheet/">Ściągawka</a> </li><li> <a href="/best-websites/">Najlepsze Strony Internetowe</a> </li><li> <a href="/data-structures-algorithms-qna/">Struktury Danych I Algorytmy – Qna</a> </li><li> <a href="/spring-tutorial/">Poradnik Wiosenny</a> </li><li> <a href="/roman-numerals/">Cyfry Rzymskie</a> </li><li> <a href="/docker-container/">Kontener Dockera</a> </li><li> <a href="/free-games/">Darmowe Gry</a> </li><li> <a href="/mysql-tutorial/">Samouczek Mysql-A</a> </li><li> <a href="/analysis-of-algorithms/">Analiza algorytmów</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<div class="content">
<div class="item">
<div class="rekl_placeholder" id="sidebar_placeholder_1"> <script type="text/javascript">atOptions = {'key' : 'f53f1abf3c3a788f849c12a956865db1','format' : 'iframe','height' : 300,'width' : 160,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">Co to jest 32 stopnie Celsjusza w stopniach Fahrenheita?</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Co to jest 32 stopnie Celsjusza w stopniach Fahrenheita?</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/what-is-32-degrees-celsius-fahrenheit"> <i class="fa fa-external-link"></i> Czytaj Więcej</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Ciekawe Artykuły</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/palindrome-program-c">Program Palindromu w C</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/bind-function-and-placeholders-in-c">Funkcja powiązania i symbole zastępcze w C++</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/where-is-gulf-mexico-131772">Gdzie jest Zatoka Meksykańska? 11 faktów, które powinieneś znać</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-cpython">Co to jest CPython?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/string-functions-c">Funkcje łańcuchowe w C++</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">Popularne Wiadomości</h2>
<div class="content">
<ul class="list"> <li><a href="/java-string-replaceall">ciąg zastępczy Java</a>
</li><li><a href="/what-is-username">co to jest nazwa użytkownika</a>
</li><li><a href="/sql-update-with-join">aktualizacja z dołączenia do sql</a>
</li><li><a href="/ascii-table-c">tabela ascii w c</a>
</li><li><a href="/difference-between-like">różnica między miłością a lubieniem</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 Wszelkie Prawa Zastrzeżone | <a href="//pl.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Zastrzeżenie</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">O Nas</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Polityka Prywatności</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>