Question 43413 in Html Question posted in
Some basic documentation can be found here.

text overwriting over another paragrah when i use line height – Html

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

Tags:

3

Answers


  1. 0

    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);
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search