Hoe extra ruimte te creëren in HTML of een webpagina

het creëren van extra ruimte in uw HTML op een webpagina kan op vele manieren worden bereikt, afhankelijk van het type ruimte dat u wilt maken. De volgende secties bevatten veel van de verschillende manieren om extra ruimte te creëren met behulp van zowel HTML en CSS.,

extra spaties maken voor of na tekst

een van de meest verwarrende dingen voor nieuwe gebruikers die een webpagina maken is dat ze niet meerdere keren op de spatiebalk kunnen drukken om extra spaties te maken. Om extra spaties voor, na of tussen uw tekst te maken, gebruikt u het   (non-breaking space) extended HTML-teken.

bijvoorbeeld, met “extra ruimte” hebben we de volgende code in onze HTML.,

extra    space

spatiëring behouden in tekst die in een pagina wordt geplakt

Als u tekst met extra spaties of tabbladen plakt, kunt u de html <pre> gebruiken om de tekst op te maken., Hieronder is een voorbeeld van het plakken van tekst met extra spaties met behulp van de <pre> tag.

This text has lots of spaces

het bovenstaande voorbeeld wordt gedaan met behulp van de onderstaande HTML-code.

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

• zie onze HTML <pre> tag pagina voor meer informatie over deze tag.

extra ruimte creëren rond een element of object

elk HTML-element kan extra ruimte toevoegen aan boven, rechts, onder of links. Zorg er echter voor dat u het verschil tussen marge en opvulling begrijpt voordat u beslist welk type ruimte u rond het element of object wilt toevoegen. Zoals te zien in de foto hieronder, padding omringt het element, binnen de grens, en de marge buiten de grens.

het voorbeeld hieronder toont onze paragraaf omgeven door een rand, ingesprongen met een marge, en met spatiëring aan de rechter-en onderkant.,

een voorbeeld van een alinea met marge en opvulling.

het bovenstaande voorbeeld is gemaakt met behulp van de onderstaande code.

in het eerste deel van de code, “margin-left: 2.5 em;” voegt een linkermarge van 2.5 em toe, die het uiterlijk van ingesprongen tekst geeft. Zoals het voorbeeld laat zien, bevindt deze afstand zich buiten de grens. In de volgende sectie, “padding: 0 7em 2em 0;” is het definiëren van de boven -, rechts -, onder-en links (met de klok mee) padding. Er is “0” top padding, ” 7em “rechts padding,” 2em ” bodem padding, en 0 links padding., De rest van dit voorbeeld bepaalt hoe de grens eruit moet zien.

een tabblad aanmaken met behulp van CSS en HTML

een tabblad kan in HTML worden aangemaakt door de linkermarge van een element aan te passen. Deze paragraaf heeft bijvoorbeeld een linkermarge van 2,5 em ten opzichte van het element dat de tekst bevat. De CSS om deze linkermarge aan te maken wordt hieronder getoond.

.tab { margin-left: 2.5em}

na het plaatsen van deze code in ons CSS-bestand, kunnen we de” tab ” klasse toepassen op elke tekst om het uiterlijk van een tab te creëren. De waarde van de marge links kan worden verhoogd of verlaagd, afhankelijk van uw behoeften.,

hoewel we de bovenstaande methode aanbevelen, kan de marge-left CSS ook inline worden toegevoegd, zoals weergegeven in het voorbeeld hieronder.

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

een voorbeeld van een linkermarge van 5EM.

• Hoe inSpring ik tekst op mijn webpagina of in HTML?

spatie Toevoegen onder een regel of alinea van tekst

Als u extra spatie wilt toevoegen onder een regel of alinea van tekst, en dit slechts één keer hoeft te doen, kunt u de tag <br> gebruiken. Hieronder is een voorbeeld van hoe deze techniek kan worden toegepast.,

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

de bovenstaande code maakt de onderstaande tekst aan.

deze zin bevat voorbeeldtekst.
zoals u kunt zien, voegen twee pauzes de spatie hierboven toe.

extra onderbrekingen kunnen indien nodig worden toegevoegd. We raden echter aan om de eerder genoemde CSS-methode te gebruiken om opvulling en spatiëring rond uw tekst toe te voegen als dit op meerdere plaatsen op een pagina wordt gedaan.