text overwriting over another paragrah when i use line height

Question

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

Answer 1

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>

Answer 2

line-height property calculates it from the beginning of the first line to the beginning of the next line so when you give it 1px it will overlap when the space is less than the height of the font's size

you can use a multiplier value like:

line-height: 1.2;

if you want 1px line height use calc() function:

line-height: calc(1 + 1px);

Answer 3

Just remove the line-height property to make it auto-measure.

.main-section p{
    font-size: 16px;
    word-spacing: 1px;
    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>
</section>