Line Height

Line Height అంటే ఏమిటి?

CSSలో line-height property ఒకే paragraphలోని వరుసల మధ్య vertical spaceను నియంత్రిస్తుంది. Text lines దగ్గరగా లేదా దూరంగా కనిపించాలంటే ఈ propertyని ఉపయోగిస్తాం.

ఎందుకు ఉపయోగిస్తాం?

Line height సరైనంగా ఉంటే paragraph చదవడానికి సులభంగా ఉంటుంది. చాలా తక్కువ line height ఉంటే lines ఒకదానితో ఒకటి కలిసినట్లు కనిపిస్తాయి. చాలా ఎక్కువగా ఉంటే paragraphలో అనవసరమైన ఖాళీ కనిపిస్తుంది.

Syntax

p {
  line-height: 1.6;
}

1.6 అనేది సాధారణంగా font sizeకి multiplierగా పనిచేస్తుంది. ఉదాహరణకు font size 16px అయితే line height సుమారు 25.6px అవుతుంది.

Line-height విలువలు

• Unitless value: 1.5 వంటి విలువ. ఇది flexible మరియు సాధారణంగా మంచి ఎంపిక.
• Length value: 24px వంటి నిర్దిష్ట vertical space.
• Percentage: 150% వంటి విలువ. ఇది font size ఆధారంగా line heightను లెక్కిస్తుంది.

ఎలా apply చేయాలి?

ముందుగా HTMLలో paragraph లేదా headingను రాయాలి. తర్వాత CSS selectorతో ఆ elementను select చేసి line-height property ఇవ్వాలి. Browser ప్రతి text line మధ్య vertical spacingను మార్చుతుంది.

Code Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Line Height Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 30px;
    }

    .reading-text {
      font-size: 18px;
      line-height: 1.7;
      max-width: 600px;
    }
  </style>
</head>
<body>
  <h1>Comfortable Reading</h1>
  <p class="reading-text">Good line height makes a paragraph easier to read. It gives each line enough vertical space and prevents the text from looking crowded.</p>
</body>
</html>

ఈ exampleలో .reading-text paragraphకు line-height: 1.7; ఇవ్వడం వల్ల ప్రతి line మధ్య చదవడానికి సరిపడే vertical space కనిపిస్తుంది.

Simple Explanation

line-height అంటే textలోని ఒక line నుంచి తరువాతి line వరకు ఉండే vertical distance. Paragraphలో lines చాలా దగ్గరగా కనిపిస్తే valueను పెంచండి. Lines చాలా దూరంగా కనిపిస్తే valueను తగ్గించండి.

ఉదాహరణకు line-height: 1.5; అంటే element యొక్క font sizeకి 1.5 రెట్లు line height ఉంటుంది. Paragraph text కోసం unitless values ఉపయోగించడం సులభం మరియు flexible.

Real-Life Example

ఒక పుస్తకంలో lines పూర్తిగా దగ్గరగా ముద్రిస్తే చదవడం కష్టం అవుతుంది. ప్రతి line మధ్య కొంత ఖాళీ ఉంటే కళ్లకు lineను follow చేయడం సులభం. వెబ్ పేజీలో paragraphలకు line-height అదే విధంగా readabilityని మెరుగుపరుస్తుంది.

Code Examples

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Line Height Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 30px;
    }

    .reading-text {
      font-size: 18px;
      line-height: 1.7;
      max-width: 600px;
    }
  </style>
</head>
<body>
  <h1>Comfortable Reading</h1>
  <p class="reading-text">Good line height makes a paragraph easier to read. It gives each line enough vertical space and prevents the text from looking crowded.</p>
</body>
</html>

The browser displays a heading and a readable paragraph. The paragraph lines have comfortable vertical spacing because the line-height is 1.7.

Line-by-Line Explanation

Try It

Try this CSS code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Try Line Height</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 30px;
    }

    p {
      font-size: 18px;
      line-height: 1.5;
      max-width: 550px;
    }
  </style>
</head>
<body>
  <h1>Read This Paragraph</h1>
  <p>Line height controls the vertical space between lines of text. Change the CSS value and observe how the paragraph changes.</p>
</body>
</html>

Practice

Common Mistakes

Interview Questions

Exam Questions

Quick Revision

• line-height text lines మధ్య vertical spaceను నియంత్రిస్తుంది.
• Paragraph readability కోసం line-height చాలా ముఖ్యమైనది.
• Unitless valuesగా 1.5 లేదా 1.7 వంటి values ఉపయోగించవచ్చు.
• Line height value పెరిగితే lines మధ్య ఖాళీ పెరుగుతుంది.
• సరైన property పేరు line-height; hyphen మర్చిపోవద్దు.