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="//brunetteerdeplete.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-tutorial/">Poradnik C</a> </li><li> <a href="/linux-shell-commands/">Polecenia Powłoki Systemu Linux</a> </li><li> <a href="/google-tricks/">Sztuczki Google’a</a> </li><li> <a href="/system-programming/">Programowanie Systemowe</a> </li><li> <a href="/geometric/">Geometryczny</a> </li><li> <a href="/strings/">Smyczki</a> </li><li> <a href="/python-numpy-statistics-functions/">Funkcje Statystyczne Numpy W Pythonie</a> </li><li> <a href="/technical-scripter/">Skrypt techniczny</a> </li><li> <a href="/24-7-innovation-labs/">24*7 Laboratoria Innowacji</a> </li><li> <a href="/roman-numerals/">Cyfry Rzymskie</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="//brunetteerdeplete.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">Lista 50 poleceń systemu Linux z przykładami</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Lista 50 poleceń systemu Linux z przykładami dla początkujących i profesjonalistów z przykładami dotyczącymi plików, katalogów, uprawnień, kopii zapasowych, ls, man, pwd, cd, chmod, man, Shell, potoków, filtrów, wyrażeń regularnych, vi itp.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/50-linux-commands-list-with-examples"> <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="/python-string-rstrip-method">Metoda rstrip() w Pythonie</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/physics-concepts/">Pojęcia Fizyczne</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/differences-between-procedural">Różnice pomiędzy programowaniem proceduralnym i obiektowym</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/move-weighting-scale-alternate-under-given-constraints">Przesuwaj skalę ważenia naprzemiennie w ramach danych ograniczeń</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-package">Pakiet Java</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-format">formacie string</a>
</li><li><a href="/what-is-special-character">co to jest znak specjalny</a>
</li><li><a href="/unsigned-int-c">programowanie w języku C bez znaku</a>
</li><li><a href="/difference-between-cinnamon">cynamon vs mate</a>
</li><li><a href="/java-lambda-expressions">lambda Javy</a>
</li><li><a href="/how-generate-random-number-java">Generator wartości losowych w Javie</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="//it.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>
<script>
!function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
#toTopBtn {
position: fixed;
bottom: 25px;
right: 25px;
z-index: 9999;
opacity: 0;
visibility: hidden;
background-color: #213141;
color: white;
border: none;
border-radius: 8px;
width: 50px;
height: 50px;
font-size: 24px;
cursor: pointer;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#toTopBtn:hover {
background-color: #555;
}
`,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
</script>
</body>
</html>