htmlcssline-height

text overwriting over another paragrah when i use line height

my text in the p element is overwriting over next p element when I use line-height to 2px, I am new to coding please help here's the code

.main-section p{
    font-size: 16px;
    word-spacing: 1px;
    line-height: 2px;
    color: #252426;
  }
<section class="main-section" id="introduction">
            <h2>Introduction</h2>
            <p>JavaScript is a cross-platform, object-oriented scripting language....JavaScript is a cross-platform, object-oriented scripting language....JavaScript is a cross-platform, object-oriented scripting language....JavaScript is a cross-platform, object-oriented scripting language....word limit</p>
            <p>JavaScript contains a standard library of objects, such as Array...JavaScript contains a standard library of objects, such as Array...JavaScript contains a standard library of objects, such as Array...word limit</p>

paragraph overwriting

Solution

  • Line Height not Less than font size if less then font size then overlap.

    .main-section p{
    font-size: 16px;
    word-spacing: 1px;
    line-height: 16px;
    color: #252426;
  }
    <section class="main-section" id="introduction">
            <h2>Introduction</h2>
            <p>JavaScript is a cross-platform, object-oriented scripting language....JavaScript is a cross-platform, object-oriented scripting language....JavaScript is a cross-platform, object-oriented scripting language....JavaScript is a cross-platform, object-oriented scripting language....word limit</p>
            <p>JavaScript contains a standard library of objects, such as Array...JavaScript contains a standard library of objects, such as Array...JavaScript contains a standard library of objects, such as Array...word limit</p>