Innstillinger i CSS: linjeavstand

I CSS, er avstanden mellom linjene veldig lett å stille inn. For dette formålet er det en spesiell eiendom. Men, selvfølgelig, det er mange andre parametre, som er universelle og kan brukes på teksten.

Hvis ingen justering er gjort, blir du satt til standardverdier. du kan endre avstanden hvis ønskelig. Verdien kan være enten en prosentandel eller piksler.

radhøyde

CSS avstanden mellom linjene kan demonstreres ved den følgende figur.

I det ovenstående bilde viser parametrene med tilsvarende avstander. Teksten er på plass font-size. Legg merke til at tekstlinjen ikke starter på bunnen og litt høyere. Feltet nedenfor for å bokstavene som har bunnelementene (g, y-, og så videre).

Legg merke til at avstanden mellom blokkene font-size kalles ledende. Med HTML og CSS denne egenskapen ikke vises, men det er i de andre grafiske og tekstredigeringsprogrammer. For eksempel i Adobe Photoshop.

Figuren over viser hvor i "Photoshop" kan du angi ledende. Og neste spesifisert font-size setting.

Eksempler på bruk av linjehøyde

I CSS kan avstanden mellom linjene angis prosent. Et illustrerende eksempel er gitt nedenfor.

I tilfelle av små verdier av brukeren av nettstedet vil være upraktisk å lese.

Avstanden kan varieres og størrelsen på skriften. Dersom forskjellen mellom de grunnleggende parametere vil variere sterkt i antall, er forskjellen kompenseres ved økning ledende.

Raffinert design

CSS avstanden mellom linjene kan dessuten tilpasse forskjellige innrykk. Tenk for eksempel på figuren.

I "Element" i dette tilfellet vil være teksten. Utfylling - polstring er i objektet, og den margin - innrykket av objektet. Border - denne rammen. Det kan være 0 piksler, og kan være 100.

Det følgende viser umiddelbart alle marginer, rammen og høyden av en tekstlinje.

Hvis du har en liten tekst, alt i en enkelt linje, eller hver linje i et eget avsnitt, kan avstanden justeres mellom de innrykket avsnitt. Det er Maring og polstring mellom linjene i en celle vil ikke ha noen effekt. De skaper innrykk bare på kantene av objektet. Objekt - hele denne paragrafen, i stedet for linjer i det. Det er viktig ikke å bli forvirret.

I tilfeller hvor et stort antall rader, som alle er plassert i det samme objekt, blir skriften anbefales å endre de grunnleggende parametre.

Hvordan øke avstanden mellom linjene i CSS

Avstanden mellom linjene i HTML, kan du registrere noen klasse eller for alle avsnitt i teksten. Hvis du angir som dette: p {line-height: 20px; } - da absolutt alle avsnittene på siden vil være strenger av 20 piksler. Hvis du vil ha på forskjellige steder i forskjellige størrelser, er det anbefalt å gjøre som følger.

Vi fore stiler.

.class1 {linje-høyde: 20 piksler; }

.class2 {linje-høyde: 16px; }

.class3 {linje-høyde: 12 piksler; }

For klarhet, legger vi en ramme, slik at du kan se at det fungerer. I fremtiden må den fjernes.

Deretter bruker vi disse klassene. Resultatet er som følger.

Merk at i det tredje tilfellet, bandet kjørte til teksten. Alt på grunn av det faktum at den skriftstørrelsen er større enn høyden for linjen. Derfor er det viktig å sikre at slike konflikter ikke var. Hvis du gjør en liten linje høyde henholdsvis redusere skrift.

Det er ikke anbefalt å gjøre for lite tekst og en liten avstand mellom linjene. Siden ingen av brukerne ikke vil være i stand til å lese alt rolig. Han raskt trette øyne. Søkemotorer også si at teksten er brukervennlig.

Videre, i de senere år er det et sterkt fokus på brukervennlighet for mobile brukere. Det anbefalinger har alltid sagt at skriftstørrelsen skal være normal, ikke liten. Spesielt sterkt det påvirker referanse. Med sin lille størrelse brukeren vil være vanskelig å bruke nettstedet navigasjon.

I søkemotoren "Google" er et spesielt verktøy som hjelper i analysen. Det er veldig praktisk for webansvarlige.

Her er et eksempel på de resultater som kan være.

Det anbefales å bruke disse tipsene fordi disse kriteriene innvirkning på søkeresultatene.