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

2px? Popular browsers support 12px at least. – Mee Mar 28 '23 at 02:48 — Mee, Mar 28 '23 at 02:48

Jordy · Answer 1 · 2023-03-28T12:30:22.867

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>

score 1 · Answer 2 · answered Mar 28 '23 at 02:51

1

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);

answered Mar 28 '23 at 02:51

Mohammed Albushra

107
4

The second value is invalid (at least in Chrome). – InSync Mar 28 '23 at 05:22

score 1 · Accepted Answer · answered Mar 28 '23 at 05:06

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>

text overwriting over another paragrah when i use line height

3 Answers3