Tabplass i stedet for flere ikke-brytende mellomrom (' ')?

Tabplass I Stedet For Flere Ikke Brytende Mellomrom Nbsp



I webutvikling legges mellomrommene til i HTML-dokumenter ved å bruke '   ” enhetskode som også refereres til som det ikke-brytende mellomrommet. I noen tilfeller er det nødvendig å legge til flere ikke-brytende mellomrom i dokumentet, som tabulatorplass. Derfor, flere « » enhetskoder kan påvirke dokumentets kodesekvens og ryddighet.

For å takle disse problemene er det flere andre måter å inkludere flere ikke-brytende mellomrom i HTML-dokumentet, for eksempel '

   ', '      'elementer, CSS '   marg-venstre   ', '   polstring-venstre   eiendommer, og mange flere.

Denne studien vil lære deg:







Først vil vi gå gjennom et eksempel som implementerer '   ' for å legge til mellomrom i HTML-dokumentet. Gå deretter gradvis gjennom illustrasjonene for å demonstrere forskjellige metoder for å legge til tabulatorplass.



Slik legger du til mellomrom ved å bruke ' ' enhetskode i HTML?

For å legge til mellomrom ved å bruke '   ' på HTML-siden følger du fremgangsmåten:



  • Legg til et div-element og tilordne det en klasse ' artikkel '.
  • Etter det, plasser en '

    ”-element for overskriften.

  • Deretter legger du til '

    ' element for å legge til et avsnitt. I begynnelsen av avsnittet legges mellomrommene til ved å indikere enhetskoden '   ':

< div klasse = 'artikkel' >
< h2 > Kunnskap er makt < / h2 >
< s >     Kunnskap er makt betyr at en utdannet mann har full kontroll over livet sitt gjennom kunnskapens styrke. < / s >
< / div >

Det kan sees at mellomrommene har blitt lagt til i begynnelsen av avsnittet:





Hvordan legge til tabulatorplass ved hjelp av HTML-elementet «»?

HTML-en ' ” er et innebygd element som brukes til å merke en del av et dokument. I det pågående eksempelet har vi lagt til -elementet med ' fanen ' id. Dette elementet er stylet i CSS for å produsere plass:



< div klasse = 'artikkel' >
< h2 >Kunnskap er makt< / h2 >
< s > < span id = 'tab' >< / span > Kunnskap er makt betyr at en utdannet mann har full kontroll over livet sitt gjennom kunnskap sin styrke.


Stil “artikkel” div

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

« .artikkel ' brukes for å få tilgang til '

'-tagger, som deretter brukes med følgende egenskaper:

  • ' bredde ” egenskap bestemmer elementets bredde.
  • ' margin ” egenskap bestemmer elementets høyde.
  • ' polstring ' genererer plass rundt elementets innhold.

Stil 'tab'-ID

#tab {
polstring-venstre: 8px;
}

« #tab ' få tilgang til ' fanen '-ID for -elementet og bruk ' polstring-venstre ” eiendom på den.

Produksjon

Hvordan legge til tabulatorplass ved hjelp av HTML-elementet «
»?

«

   ”-elementet definerer den forhåndsformaterte teksten. Teksten i 
-elementet vises på nettsiden slik den er.

Oversikt eksemplet ved først å lage HTML-siden:

  • Legg til '

    ” element for å angi en overskrift på nivå to til dokumentet.

  • Deretter legger du til '
       '-taggen, og spesifiser innhold med ønsket formatering:
< h2 >HTML pre Tag< / h2 >
< pre >
funksjon produktFunksjon ( p1, p2 ) {
returner p1 * p2;
}
< / pre >

Produksjon

Hvordan legge til tabulatorplass ved å bruke CSS 'margin-left' egenskap?

For å legge til tabulatorplass ved hjelp av CSS ' marg-venstre ' eiendom, følg den angitte prosedyren:

  • Ta først med et div-element i dokumentet og tilordne det en klasse ' Bilder '.
  • Inne i dette div-elementet, legg til ytterligere to div-elementer sammen med klassen ' img-1 ' og ' img-2 'henholdsvis.
  • Hvert av disse to div-elementene inneholder bilder som er spesifisert med ' ' stikkord.
  • disse ' '-tagger er knyttet til ' src ' og ' bredde ' attributter. 'src'-attributtet spesifiserer URL-en til bildet, og 'width'-attributtet justerer bildets bredde.

Her er HTML-koden for det ovennevnte scenariet:

< div klasse = 'Bilder' >
< 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 slik ut:

La oss gå mot CSS-delen for å legge til flere mellomrom i ' img-2 ” klasse uten å bruke flere ikke-brytende mellomrom.

Stil 'bilder' div

.Bilder {
bredde : 500px;
margin: bil;
}

« .Bilder ' brukes for å få tilgang til HTML-divisjonen som inneholder ' Bilder ' klasse. Forklaringen av egenskapene ovenfor er som følger:

  • ' bredde ” egenskap bestemmer elementets bredde.
  • ' margin ”-egenskapen bestemmer rommet rundt sidene til elementet.

Stil 'img-2' div
Få tilgang til div-elementet ved å bruke ' .img-2 ':

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

« marg-venstre ' eiendom med en ' 30 piksler '-verdien brukes på HTML div-elementet som har klassen ' img-2 '. Denne egenskapen vil legge til 30 px plass til venstre for elementet.

Her viser resultatet at det andre bildet er brukt med litt plass i starten:

Vi har utdypet å legge til tabulatorplasser i stedet for å bruke flere ikke-avbrytende mellomrom '   '.

Konklusjon

I HTML er '   Entitetskode brukes vanligvis for å legge til ikke-brytende plass i dokumentet. For å unngå å bruke denne enhetskoden flere ganger, er det andre måter å legge til tabulatorplass i et dokument. Disse metodene inkluderer bruk av HTML '

   ', '      'elementer',   marg-venstre   eiendom, og mange flere. Denne bloggen har nevnt flere måter som hjelper å legge til tabulatorplasser i HTML-dokumentet i stedet for å legge til flere « » enhetskoder.