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="/tutorials/">Poradniki</a> </li><li> <a href="/physics/">Fizyka</a> </li><li> <a href="/c-20-cat/">C++ 20</a> </li><li> <a href="/python-numpy-ndarray/">Python Numpy-Ndarray</a> </li><li> <a href="/numbers/">Liczby</a> </li><li> <a href="/maths/">Matematyka</a> </li><li> <a href="/google-workspace/">Google Workspace</a> </li><li> <a href="/definitions-meanings/">Definicje I Znaczenia</a> </li><li> <a href="/difference/">Różnica</a> </li><li> <a href="/linux-shell-commands/">Polecenia Powłoki Systemu Linux</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Ile zer jest w Googolu? Googolplex?</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Co to jest google? Ile zer w googlplexie? Dowiedz się wszystkiego o tych i innych niezwykle dużych liczbach, korzystając z naszego kompletnego przewodnika.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/how-many-zeros-googol-131588"> <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="/how-convert-int-string-python">Jak przekonwertować na ciąg w Pythonie</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/uml-use-case-diagram">Diagram przypadków użycia UML</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/fermat-s-little-theorem">Małe twierdzenie Fermata</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-generate-uuid">Java Wygeneruj UUID</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/important-college-application-deadlines-you-cant-miss-131306">Ważne terminy składania aplikacji na studia, których nie możesz przegapić</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="/c-int-string">c++ konwertuje na ciąg</a>
</li><li><a href="/how-split-strings-c">dzielenie ciągu w c++</a>
</li><li><a href="/gimp-vs-inkscape">Inkscape vs Gimp</a>
</li><li><a href="/c-pointers">wskazówki w c</a>
</li><li><a href="/how-find-hidden-apps-android">jak odkryć aplikację na Androidzie</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="//no.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>