Inställningar i CSS: radavstånd

I CSS, är avståndet mellan raderna mycket lätt att ställa in. För detta ändamål finns en speciell egenskap. Men, naturligtvis, det finns många andra parametrar som är universella och kan appliceras på texten.

Om ingen justering görs, är du inställd på standardvärden. du kan ändra avståndet om så önskas. Värdet kan vara antingen en procentsats eller pixlar.

rad Höjd

CSS avståndet mellan linjerna kan demonstreras genom följande figur.

I ovanstående bild visar parametrarna med motsvarande avstånd. Texten är i rymden font-size. Observera att textraden inte startar vid basen och något högre. Utrymmet nedan till brev som har bottenelementen (g, y, och så vidare).

Observera att utrymmet mellan blocken font-size kallas leder. Med HTML och CSS här egenskapen inte visas, men det är i andra grafiska och textredigerare. Till exempel i Adobe Photoshop.

Bilden ovan visar var i "Photoshop" kan du ange ledande. Och nästa specificerade font-size inställning.

Exempel på att använda line-height

I CSS, kan avståndet mellan raderna inställas procent. Ett illustrativt exempel ges nedan.

I fallet med små värden på användaren av din webbplats kommer att vara besvärligt att läsa.

Avståndet kan varieras och storleken på typsnittet. Om skillnaden mellan de grundläggande parametrarna skiljer sig kraftigt i antal mellanskillnaden kompenseras av ökningen ledande.

nyanser i designen

CSS avståndet mellan linjerna kan vidare anpassa olika strecksatserna. Betrakta exemplet i figuren.

I "Element" i detta fall blir texten. Padding - utfyllnad är inne objektet och marginalen - indraget av objektet. Border - denna ram. Det kan vara 0 pixlar och kan vara 100.

Följande bild visar omedelbart alla marginaler, ramen och höjden på en textrad.

Om du har en liten text, allt i en enda rad eller varje rad i en separat punkt, kan avståndet ställas in mellan de indragna stycken. Det är Maring och stoppning mellan raderna i en cell kommer att ha någon effekt. De skapar indraget endast vid kanterna på objektet. Object - hela denna punkt i stället för linjer i det. Det är viktigt att inte bli förvirrad.

I de fall där ett stort antal rader, som alla är belägna i samma objekt, är typsnittet rekommenderas att ändra de grundläggande parametrarna.

Hur man kan öka avståndet mellan raderna i CSS

Avståndet mellan raderna i HTML, kan du registrera dig för att någon klass eller för alla stycken i texten. Om du anger så här: p {line-height: 20px; } - då absolut alla stycken på sidan kommer att vara strängar av 20 pixlar. Om du vill ha på olika platser i olika storlekar, är det rekommenderat att göra på följande sätt.

Vi föreskriver stilar.

.class1 {line-height: 20px; }

.class2 {line-height: 16px; }

.class3 {line-height: 12px; }

För tydlighetens skull vi lägger till en ram, så att du kan se att det fungerar. I framtiden måste den tas bort.

Sedan använder vi dessa klasser. Resultatet är följande.

Observera att i det tredje fallet, körde bandet till texten. Allt på grund av det faktum att teckenstorleken är större än höjden av linjen. Därför är det viktigt att se till att sådana konflikter inte. Om du gör en liten linje höjd respektive minska teckensnittet.

Det rekommenderas inte att göra för lite text och ett litet avstånd mellan raderna. Eftersom ingen av användarna inte kommer att kunna läsa allt lugnt. Han snabbt trötta ögon. Sökmotorer säger också att texten är användarvänligt.

Dessutom under de senaste åren finns det en stark betoning på användbarhet för mobila användare. Där rekommendationer har alltid sagt att teckenstorleken ska vara normal, inte liten. Speciellt starkt den påverkar referens. Med sin ringa storlek användaren kommer att bli svårt att använda navigeringen.

I sökmotorn "Google" är ett speciellt verktyg som hjälper i analysen. Det är mycket praktiskt för webbansvariga.

Här är ett exempel på de resultat som kan vara.

Det rekommenderas att använda dessa tips eftersom dessa kriterier påverkar sökresultaten.