Same line-height

Question

I want to have the same line-height between all my lines, is that possible (considering that I specified it for all as 0.99em). the space between P tag and UL tags has to be 0.99em as well. Also the space between P tag and P tag has to be 0.99em. Is that possible?

Please see Bootply here...http://www.bootply.com/AIcBXdqs6t

Code:

HTML

<p><span>7.1</span> this is itthis is itthis is itthis is itthis is itthis is itthis is itthis is itthis is itthis is itthis is itthis is itthis is itthis is itthis is itthis is itthis is it.</p>
<p><span>7.2</span> here we gohere we gohere we gohere we gohere we gohere we gohere we gohere we gohere we gohere we gohere we gohere we gohere we gohere we go.</p>
<p><span>7.3</span> now toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow too</p>
<ul>
<li>(a) why why why whywhy whywhy whywhy whywhy whywhy whywhy whywhy why</li>
<li>(b) if if ifif if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if  </li>
<li>(c) please pleasepleasepleasepleasepleasepleasepleasepleasepleasepleasepleasepleasepleasepleasepleaseplease</li>
</ul>
<p><span>8.1</span> Take this.Take this.Take this.Take this.Take this.Take this.Take this.Take this.Take this.Take this.Take this.Take this.Take this.Take this.Take this.Take this.Take this.Take this.Take this.Take this.Take this.</p>
<p><span>8.2</span> Take this.Take this.this.Take this.Take this.Take this.this.Take this.Take this.Take this.Take this.Take this.</p>

CSS:

/* CSS used here will be applied after bootstrap.css */

p {
    padding-left: 3em;
    position: relative;
    margin-left:5em;
    margin-right:5em;
    line-height:0.99em;
}

p > span {
    display: inline-block;
    left: 0;
    position: absolute;
    top: 0; 
    width: 3em
}

ul {
    list-style: none;
    text-indent:-0.5em;
    margin-left:7em;
    margin-right:4em;
    line-height:0.99em;
}

Looks like all your lines have line height of 0.99em. Are you referring to space between and of you P tag and beginning of UL tags? — qwerty_igor, Jun 11 '15 at 23:24
@qwety_igor - correct, the space between P tag and UL tags has to be 0.99em as well. Also the space between P tag and P tag has to be 0.99em. — , Jun 11 '15 at 23:28
space between tags is not the line-height property. in your case tags have space between them because margin-bottom: 10px is applied to it. Check it out set all margin-bottom:0px and you'll see the difference. let me know if it helps — qwerty_igor, Jun 11 '15 at 23:31
@qwerty_igor - Aaarrghh, spent an hour looking for solution and it was so easy. Thanks a lot, you fixed it! — , Jun 11 '15 at 23:36

score 0 · Answer 1 · edited May 23 '17 at 11:46

0

Have you tried using setting the line-height property with a px value? em is a relative unit and can tricky if you dont know whats up. This is a good explanation Why em instead of px?

I have added px line-height settings to your code here http://www.bootply.com/cVuRikEPbO#

edited May 23 '17 at 11:46

Community

1
1

answered Jun 11 '15 at 23:38

luckyape

722
8
22

score 0 · Accepted Answer · answered Jun 11 '15 at 23:41

Posting answer from the comment.

Line-height property is for setting up a height of the line in the tag, so that two line paragraph would have some set height value for each line. Think of it as height inside the tag.

Space between tags is not the line-height property. in your case tags have space between them because margin-bottom: 10px is applied to it.

score 0 · Answer 3 · answered Apr 07 '17 at 13:34

Setting a line-heigh with a length value as you have done does not guarantee that line to be that height.

The computed value of the line-height will not be exactly what you specify if the font does not fit exactly. (What 'fit exactly' means may also not be as simple as all that either.)

My test code sample:

<p style="line-height:12pt;font-family:Verdana;font-size:16pt;">
line-height:12pt / font-size:16pt<br><br>
Testing Testing Testing<br/>
Testing Testing <span style="font-family:'Segoe Script';">Testing Segoe Script</span><br/>
Testing Testing Testing<br/>
</p>
<br>
<p style="line-height:12pt;font-family:Verdana;font-size:12pt;">
line-height:12pt / font-size:12pt<br><br>
Testing Testing Testing<br/>
Testing Testing <span style="font-size:20pt;">Testing font-size:20pt</span><br/>
Testing Testing Testing<br/>
</p>

Same line-height

3 Answers3