Jak utworzyć dodatkową przestrzeń w HTML lub stronie internetowej

tworzenie dodatkowej przestrzeni w HTML na stronie internetowej można osiągnąć na wiele sposobów w zależności od rodzaju przestrzeni, którą chcesz utworzyć. Poniższe sekcje zawierają wiele różnych sposobów tworzenia dodatkowej przestrzeni za pomocą HTML i CSS.,

tworzenie dodatkowych spacji przed lub po tekście

jedną z najbardziej mylących rzeczy dla nowych użytkowników, którzy tworzą stronę internetową jest to, że nie mogą nacisnąć spacji wiele razy, aby utworzyć dodatkowe spacje. Aby utworzyć dodatkowe spacje przed, po lub między tekstem, użyj rozszerzonego znaku HTML & nbsp; (non-breaking space).

na przykład z „extra space” mamy następujący kod w naszym HTML.,

extra    space

Zachowaj odstępy w tekście wklejonym na stronę

Jeśli wklejasz tekst z dodatkowymi spacjami lub tabulatorami, możesz użyć znacznika HTML<pre> aby zachować sformatowany tekst., Poniżej znajduje się przykład jak wkleić tekst z dodatkowymi spacjami za pomocą znacznika <pre>.

This text has lots of spaces

powyższy przykład jest wykonywany przy użyciu poniższego kodu HTML.

<pre class="tab">This text has lots of spaces</pre>

• Zobacz nasz HTML<pre> strona znacznika, aby uzyskać więcej informacji na temat tego tagu.

tworzenie dodatkowej przestrzeni wokół elementu lub obiektu

każdy element HTML może mieć dodatkowe odstępy dodane do górnej, prawej, dolnej lub lewej strony. Przed podjęciem decyzji o rodzaju przestrzeni, którą chcesz dodać wokół elementu lub obiektu, upewnij się jednak, że rozumiesz różnicę między marginesem a wyściółką. Jak widać na poniższym obrazku, wyściółka otacza element, wewnątrz obramowania, a margines poza obramowaniem.

poniższy przykład pokazuje nasz akapit otoczony obramowaniem, wcięty marginesem i z odstępami po prawej i na dole.,

przykład akapitu z marginesem i wypełnieniem.

powyższy przykład został stworzony przy użyciu poniższego kodu.

w pierwszej części kodu „margin-left: 2.5 em;” dodaje lewy margines 2.5 em, co daje wygląd wciętego tekstu. Jak pokazano na przykładzie, odstępy te znajdują się poza obramowaniem. W następnej sekcji „padding: 0 7em 2em 0;” definiuje górne, prawe, dolne i lewe (zgodnie z ruchem wskazówek zegara) wypełnienie. Istnieje „0” top padding, „7EM” right padding, ” 2EM ” bottom padding i 0 left padding., Pozostałą częścią tego przykładu jest określenie, jak powinna wyglądać granica.

Tworzenie zakładki za pomocą CSS i HTML

zakładkę można utworzyć w HTML, dostosowując lewy margines elementu. Na przykład ten akapit ma lewy margines 2,5 em od elementu zawierającego tekst. CSS do utworzenia tego lewego marginesu jest pokazany poniżej.

.tab { margin-left: 2.5em}

Po umieszczeniu tego kodu w naszym pliku CSS, możemy zastosować klasę „tab” do dowolnego tekstu, aby stworzyć wygląd karty. Wartość marginesu lewego można zwiększyć lub zmniejszyć w zależności od potrzeb.,

chociaż zalecamy powyższą metodę, CSS margin-left można również dodać w linii, jak pokazano w poniższym przykładzie.

<p style="margin-left:2.5em">An example of a 5em left margin.</p>

przykład lewego marginesu 5em.

• Jak wcięcie lub tabulator tekstu na mojej stronie internetowej lub w HTML?

Dodaj spację pod wierszem lub akapitem tekstu

Jeśli chcesz dodać dodatkową spację pod wierszem lub akapitem tekstu i musisz to zrobić tylko raz, możesz użyć znacznika<br>. Poniżej znajduje się przykład zastosowania tej techniki.,

<p>This sentence contains example text.<br><br>As you can see, two breaks add the space above.</p>

powyższy kod tworzy tekst pokazany poniżej.

to zdanie zawiera przykładowy tekst.
Jak widać, dwa przerwy dodają spację powyżej.

w razie potrzeby można dodać dodatkowe przerwy. Sugerujemy jednak użycie wspomnianej wcześniej metody CSS, aby dodać wypełnienia i odstępy wokół tekstu, jeśli jest on wykonywany w wielu miejscach na stronie.