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> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /><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><!--//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="/ai-blogs/">Blogi Ai</a> </li><li> <a href="/inorder-traversal/">Przeprawa Nieuporządkowana</a> </li><li> <a href="/java-strings/">Ciągi Java</a> </li><li> <a href="/yaml-tutorial/">Samouczek Yaml</a> </li><li> <a href="/java-double/">Java-Double</a> </li><li> <a href="/cpp-bitset/">Bitset Cpp</a> </li><li> <a href="/python-math-library/">Biblioteka Matematyczna Pythona</a> </li><li> <a href="/directi/">Dyrektor</a> </li><li> <a href="/system-programming/">Programowanie Systemowe</a> </li><li> <a href="/javascript-lodash/">Javascript — Lodash</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Czy musisz wziąć ACT?</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Czy muszę zdawać ACT na studia? Ten przewodnik ekspercki wyjaśnia wzrost liczby szkół opcjonalnych do egzaminów i to, w jaki sposób ACT może nadal pomóc w składaniu wniosków.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/do-you-have-take-act-1311398"> <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="/linux-zip-command-with-examples">Polecenie Zip w systemie Linux z przykładami</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-much-is-100g-ml">Ile to jest 100 g w ml?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/python-remove-spaces-from-string">Pythona | Usuń spacje z ciągu</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/acid-properties-in-dbms">Właściwości ACID w DBMS</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/top-10-highest-goalscorers-all-time-football">10 najlepszych strzelców wszechczasów w piłce nożnej [Aktualizacja 2024]</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="/how-read-csv-file-java">Java odczytuje plik CSV</a>
</li><li><a href="/java-oops-concepts">ups, koncepcje</a>
</li><li><a href="/npm-clear-cache">Wyczyść pamięć podręczną npm</a>
</li><li><a href="/how-center-images-css">jak wyśrodkować obraz w css</a>
</li><li><a href="/java-double-keyword">podwójne w Javie</a>
</li><li><a href="/java-scanner">skaner skanuj Java</a>
</li><li><a href="/alphabet-numbers">numerowanie alfabetu</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="//sl.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>