Legg til mellomrom mellom HTML -elementer bare ved hjelp av CSS

Plass mellom HTML -elementet spiller en avgjørende rolle i dokumenter. Det er vanskelig for en bruker å raskt skanne en side og bestemme hva som er koblet og hva som ikke er hvis det ikke er noen hull. Derfor er det viktig å holde et rom mellom alle elementer i dokumentet. For dette formålet er det forskjellige metoder som brukes på hvert språk for å legge til mellomrom mellom elementene, inkludert CSS.

Denne opplæringen vil demonstrere metoden for å legge til mellomrom mellom HTML -elementer ved bruk av CSS -egenskaper.

Hvordan legge til/sette inn mellomrom mellom HTML -elementer bare ved hjelp av CSS?

For å legge til mellomrom mellom HTML -elementer som bare bruker CSS, bruk "”Element for å legge til data på HTML -siden. Få tilgang til elementet og bruk “vise”Med verdiene”Nett”,“rutenett-template-rader/kolonne”, Og“GRID-GAP”CSS -egenskaper.

For å gjøre det, følg den nevnte prosedyren.

Trinn 1: Lag en div container

Først, bruk "”Element for å lage en div container på HTML -siden. Sett videre et klasseattributt og spesifiser et navn for klasseelementet for senere bruk.

Trinn 2: Lag nestet div container

Neste, oppretter en annen DIV -beholder ved å følge samme prosedyre.

Trinn 3: Legg til data ved å bruke "Span" -element

Etter det, bruk "”Element mellom Nested Div Container for å sette inn data:

Punkt 1
Punkt 2
Punkt 3





Punkt 4
Punkt 5
Punkt 6

Trinn 4: Stil “div” container

Få tilgang til Main Div Container ved hjelp av klassenavnet som “.hoved-”:

.hoved
Grense: 4px solid grønn;
polstring: 30px;
Margin: 40px;

Bruk deretter følgende egenskaper:

• “grense”Eiendom brukes til å spesifisere grensen rundt elementet.
• “polstring”Tildeler roms ytre side av elementet i en definert grense.
• “margin”Bestemmer plassen på en HTML -side rundt den definerte grensen.

Produksjon

Trinn 5: Stil "Span" -beholder

Få tilgang til “spenn”Container og bruk CSS -egenskapene som er nevnt i kodeblokken nedenfor:

Span
Grense: 3px Groove Blue;
bakgrunnsfarge: RGB (240, 224, 137);
tekst-align: sentrum;

Her:

• “bakgrunnsfarge”Eiendom definerer fargen på baksiden av elementet.
• “Tekstalign”Brukes for å stille inn justering av teksten i det definerte elementet.

Trinn 6: Legg til mellomrom mellom elementer i kolonnen

Nå, bruk "id”Selector”#”Og verdien av” id”For å få tilgang til beholderen. Bruk deretter de under-uttalte egenskapene for å legge til mellomrom mellom elementene:

#kolonne
Display: rutenett;
Margin: 20px 40px;
rutenett-template-kolonner: repetisjon (auto-fylling, auto);
rutenett-gap: 14px;

Her:

• “vise”Eiendom bestemmer skjermatferden til tilgangselementet. For å gjøre det settes verdien av denne egenskapen som "Nett”. CSS-nettoppsett definerer et flerdimensjonalt rutenettsystem til CSS.
• “rutenett-template-kolonner”Tildeler antall og størrelse på kolonner inne i nettbeholderen.
• “GRID-GAP”Legger til plass mellom elementer som bare fungerer på nettartikler.

Trinn 7: Legg til mellomrom mellom elementer i rader

Få tilgang til den indre DIV -beholderen ved hjelp av ID -verdien og bruk CSS -egenskapene:

#Rows
Display: rutenett;
Margin: 20px 40px;
rutenett-Template-Rows: Repeat (Auto-Fill, Auto);
rutenett-gap: 20px;

Deretter bruker du “vise”,“margin”,“GRID-GAP”, Og“rutenett-template-rader" egenskaper. “rutenett-template-rader”Definer høyden og antall radene i en angitt utforming av rutenettet:

Du har lært om å legge til plass mellom HTML -elementer med bare CSS -egenskaper.

Konklusjon

For å legge til mellomrommet mellom HTML -elementer som bare bruker CSS, bruk "”Element for å legge til data på HTML -siden. Få tilgang til elementet og bruk “vise”Med verdiene”Nett”,“rutenett-template-rader/kolonne”, Og“GRID-GAP”CSS -egenskaper som brukes. Denne oppskrivningen har forklart prosedyren for å legge til plass mellom HTML-elementer bare ved bruk av CSS.