Tab-mellemrum i stedet for flere ikke-brydende mellemrum (' ')?

Tab Mellemrum I Stedet For Flere Ikke Brydende Mellemrum Nbsp



I webudvikling tilføjes mellemrummene i HTML-dokumenter ved at bruge '   ” enhedskode, som også kaldes det non-breaking space. I nogle tilfælde er det påkrævet at tilføje flere ubrudte mellemrum i dokumentet, f.eks. tabulatorplads. Derfor flere ' ' enhedskoder kan påvirke dokumentets kodesekvens og pænhed.

For at løse disse problemer er der adskillige andre måder at inkludere flere ikke-brudende mellemrum i HTML-dokumentet, såsom '

   ', '      ' elementer, CSS '   margin-venstre   ', '   polstring-venstre   ” ejendomme og mange flere.

Denne undersøgelse vil lære dig:







Først vil vi gennemgå et eksempel, der implementerer '   ” for at tilføje mellemrum i HTML-dokumentet. Gå derefter gradvist gennem illustrationerne for at demonstrere forskellige metoder til at tilføje tabulatorplads.



Sådan tilføjer du mellemrum ved hjælp af ' ' enhedskode i HTML?

For at tilføje mellemrum ved hjælp af '   ” på HTML-siden skal du følge de angivne trin:



  • Tilføj et div-element og tildel det en klasse ' artikel ”.
  • Derefter placeres et '

    ”-element for overskriften.

  • Tilføj derefter '

    ” element for at tilføje et afsnit. I begyndelsen af ​​afsnittet tilføjes mellemrummene ved at angive enhedskoden '   ”:

< div klasse = 'artikel' >
< h2 > Viden er magt < / h2 >
< s >     Viden er magt betyder, at en uddannet mand har fuldstændig kontrol over sit liv gennem videns styrke. < / s >
< / div >

Det kan ses, at mellemrummene er blevet tilføjet i starten af ​​afsnittet:





Sådan tilføjes tabulatorplads ved hjælp af HTML-elementet ''?

HTML ' ” er et inline-element, der bruges til at markere en del af et dokument. I det igangværende eksempel har vi tilføjet -elementet med ' fanen ' id. Dette element er stylet i CSS for at producere plads:



< div klasse = 'artikel' >
< h2 >Viden er magt< / h2 >
< s > < span id = 'fane' >< / span > Viden er magt betyder, at en uddannet mand har fuldstændig kontrol over sit liv gennem viden 's styrke.


Stil “artikel” div

.artikel {
margin: auto;
bredde : 400px;
polstring: 10px;
}

Det ' .artikel ' bruges til at få adgang til '

'-tags, som derefter anvendes med følgende egenskaber:

  • bredde ” egenskab bestemmer elementets bredde.
  • margen ” egenskab bestemmer elementets højde.
  • polstring ” genererer plads omkring elementets indhold.

Stil 'fane'-id

#faneblad {
polstring-venstre: 8px;
}

Det ' #faneblad ' få adgang til ' fanen '-id for -elementet og anvende ' polstring-venstre ” ejendom på den.

Produktion

Sådan tilføjes tabulatorplads ved hjælp af HTML-elementet '
'?

Det '

   ” element definerer den forudformaterede tekst. Teksten i 
-elementet vises på websiden, som den er.

Oversigt eksemplet ved først at oprette HTML-siden:

  • Tilføj '

    ” element for at angive en overskrift på niveau to til dokumentet.

  • Tilføj derefter '
       ” tag, og angiv indhold med den ønskede formatering:
< h2 >HTML før tag< / h2 >
< præ >
funktion produktFunktion ( p1, p2 ) {
returner p1 * p2;
}
< / præ >

Produktion

Sådan tilføjes tabulatorplads ved hjælp af CSS 'margin-left' egenskab?

For at tilføje tabulatorplads ved hjælp af CSS ' margin-venstre ” ejendom, følg den angivne procedure:

  • Inkluder først et div-element til dokumentet og tildel det en klasse ' billeder ”.
  • Inden i dette div-element skal du tilføje yderligere to div-elementer sammen med klassen ' img-1 ' og ' img-2 ' henholdsvis.
  • Hvert af disse to div-elementer indeholder billeder, der er specificeret ved hjælp af ' ” tag.
  • Disse ' ' tags er knyttet til ' src ' og ' bredde ' egenskaber. 'src'-attributten angiver URL'en på billedet, og 'width'-attributten justerer billedets bredde.

Her er HTML-koden for det ovenfor diskuterede scenario:

< div klasse = 'billeder' >
< div klasse = 'img-1' >
< img src = '/spring-images/marguerite-flower.jpg' bredde = '250' >
< / div >
< div klasse = 'img-2' >
< img src = '/spring-images/flower-ga8f105f1d_1920.jpg' bredde = '250' >
< / div >
< / div >

HTML-siden vil se sådan ud:

Lad os gå mod CSS-sektionen for at tilføje flere mellemrum til ' img-2 ” klasse uden at bruge flere ikke-afbrydende mellemrum.

Stil “billeder” div

.billeder {
bredde : 500px;
margin: auto;
}

Det ' .billeder ' bruges til at få adgang til HTML-div, der indeholder ' billeder ' klasse. Forklaringen af ​​de ovennævnte egenskaber er som følger:

  • bredde ” egenskab bestemmer elementets bredde.
  • margen ” egenskab bestemmer rummet omkring elementets sider.

Stil 'img-2' div
Få adgang til div-elementet ved at bruge ' .img-2 ”:

.img- 2 {
margin-venstre: 30px;
}

Det ' margin-venstre ' ejendom med et ' 30 px ' værdi anvendes på HTML div elementet med klasse ' img-2 ”. Denne egenskab tilføjer 30px plads til venstre for elementet.

Her viser resultatet, at det andet billede er påført med lidt plads i starten:

Vi har uddybet at tilføje tabulatorpladser i stedet for at bruge flere ikke-afbrydende mellemrum '   ”.

Konklusion

I HTML er '   Entitetskode bruges almindeligvis til at tilføje ikke-brydende plads i dokumentet. For at undgå at bruge denne enhedskode flere gange, er der andre måder at tilføje tabulatorplads i et dokument. Disse metoder omfatter brugen af ​​HTML '

   ', '      'elementer',   margin-venstre   ” ejendom, og mange flere. Denne blog har nævnt flere måder, der hjælper med at tilføje tabulatorrum i HTML-dokumentet i stedet for at tilføje flere ' ' enhedskoder.