HTML tag affecting line height, how to make

If I have a  tag in a multi-line  tag, the line with the superscript on it has a larger line spacing above it than the other lines, irregardless of what line-height I put on the .

Edit for clarification: I don't mean i have lots of s, each which is on a single line. I have a single  with enough content in it to cause wrapping onto multiple lines. Somewhere (anywhere) in the text there may be a  or . This affects the line height for that line by adding extra spacing above/below. If I set a larger line-height on the  this makes no difference to the problem. The line-height is increased, but the extra spacing still remains.

How can I make it consistent - i.e. all lines have the same spacing whether they contain a  or not?

Your solutions must be cross-browser (IE 6+, FF, safari, opera, chrome)

标签： html css subscript superscript

14条回答

仙女界的扛把子

2楼-- · 2020-02-02 04:21

I prefer the solution suggested here, as exemplified by this jsfiddle:

CSS:

sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.2em;
}

sub {
  top: 0.2em;
}

HTML:

<span>The following equation is perhaps the most well known of all: </span><span id="box">E<sub>a</sub> = mc<sup>2</sup></span><span>.  And it gives an opportunity to try out a superscript and even throw in a superfluous subscript!  I'm sure that Einstein would be pleased.</span>.

The beauty of this solution is that you can tailor the vertical positioning of the superscript and subscript, to avoid any clashes with the line above or below... in the above, just increase or decrease the 0.2em to suit your requirements.

0人赞添加讨论(0) 举报

smile是对你的礼貌

3楼-- · 2020-02-02 04:21

To make all lines taller, to look the same as the line with the superscript, define a larger line-height for the entire paragraph

<p style='line-height:150%'>

or whatever value gives the effect you desire.

It may look strange, but that's how you described your requirements.

EDIT: In order to make all lines look the same when only one needs more vertical space than the others, ALL lines in the paragraph will have to be taller.

This, as I said, may not an attractive solution. Maybe something can be done with a span making just the text with the sub/superscript smaller, apart from that I don't believe what you want can be achieved. But I'd like to see someone else's solution.

EDIT2: Incidentally, I've tried a small html file containing

<html>
<head>
<title>line-height</title>
<style>
p {
    line-height : 1.5em;
    width : 25em;
}
</style>
</head>
<body>
<p>Mary had a little lamb, its fleece<sup>1</sup> was white as snow, 
and everywhere that Mary went, the lamb<sub>2</sub> was sure to go.
</p>
</body>
</html>

And the lines are all the same height in FF3.0.14 and Konqueror (I can't speak for other browsers)

0人赞添加讨论(0) 举报

来，给爷笑一个

4楼-- · 2020-02-02 04:27

I've been using line-height: normal for the superscript, which works fine for me in Safari, Chrome, and Firefox, but I'm not sure about IE.

0人赞添加讨论(0) 举报

Rolldiameter

5楼-- · 2020-02-02 04:30

I prefer to use length on the vertical-align. This aligns the baseline of the element at the given length above the baseline of its parent.

sup {
   font-size: .83em;
   vertical-align: 0.25em;
   line-height: 0;
}

0人赞添加讨论(0) 举报

你好瞎i

6楼-- · 2020-02-02 04:31

&sup1, &sup2 etc. might do the trick. it's an HTML trick to superscript

0人赞添加讨论(0) 举报

对你真心纯属浪费

7楼-- · 2020-02-02 04:32

I had the same problem and non of the given answers worked. But I found a git commit with a fix that did work for me:

sup {
  font-size: 0.8em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: -0.5em;
}

0人赞添加讨论(0) 举报

1 2 3 下一页

HTML tag affecting line height, how to make

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间

HTML ^{tag affecting line height, how to make}