나는이있는 경우 <sup>여러 줄에 태그 <p>무엇 라인 높이의 태그는 다른 라인보다 그 위에 간격보다 큰 라인을 가지고에 첨자와 라인, 선명하게 촬상을 내가 입고 <p>.
설명 편집 : 나는 <p>각각 한 줄에있는 많은을 가지고 있다는 것을 의미하지는 않습니다 . <p>여러 줄에 줄 바꿈하기에 충분한 내용 의 단일 항목 이 있습니다. 어딘가에 텍스트 (어디서나)이있을 수있다 <sup>나 <sub>. 이는 위 / 아래에 여분의 간격을 추가하여 해당 행의 행 높이에 영향을줍니다. 더 큰 선 높이를 설정 <p>하면 문제와 아무런 차이가 없습니다. 줄 높이는 증가하지만 여분의 간격은 여전히 남아 있습니다.
일관성을 유지하려면 어떻게해야 <sup>합니까?
솔루션은 브라우저 간이어야합니다 (IE 6+, FF, 사파리, 오페라, 크롬)
답변:
line-height는 그것을 고치지 만 꽤 크게 만들어야 할 수도 있습니다. 내 설정에서 <sup>더 이상 방해하지 않기 전에 선 높이를 약 1.8로 늘려야 하지만 글꼴마다 다릅니다.
일관된 줄 높이를 얻는 한 가지 방법은 기본값 대신 고유 한 위첨자 스타일을 설정하는 것 vertical-align: super입니다. top이것을 사용 하면 라인 상자에 아무것도 추가하지 않지만 글꼴 크기를 더 줄여서 적합하게 만들 수 있습니다.
sup { vertical-align: top; font-size: 0.6em; }시도 할 수있는 또 다른 해킹은 위치 지정을 사용하여 행 상자에 영향을 미치지 않고 조금 위로 이동하는 것입니다.
sup { vertical-align: top; position: relative; top: -0.5em; }물론 선 높이가 충분하지 않으면 위의 선으로 충돌 할 위험이 있습니다.
vertical-align: bottom(그렇지는 않지만 top) position:relative;긍정적 인 top.
sup {
line-height: 0;
/* The following rules (or similar) likely come from browser
* style and are not needed
*/
font-size: 0.83em;
vertical-align: super;
}트릭은 <sup>의 행 높이를 0 으로 설정하는 것입니다. @Scott는 보통을 사용한다고 말했지만 항상 작동하지는 않습니다.
즉 , 위 첨자 텍스트를 수용하기 위해 주변 텍스트의 줄 높이 를 변경할 필요가 없습니다 . IE7 +와 다른 주요 브라우저에서 이것을 테스트했습니다.
line-height속성 과의 충돌을 방지 합니다. line-height물론 전체 가 작게 설정된 경우에도 여전히 이전 선과 교차 할 수 있습니다 .
line-height: 100%이 경우에 사용하십시오 .
line-height0, 1, 1em 및 100 %입니다. 이 모든 것이 Chrome 및 Firefox에서 작동합니다.
나는 같은 문제가 있었고 주어진 대답 중 하나가 효과가 없었습니다. 그러나 나는 나를 위해 일한 수정 프로그램 으로 git commit 을 발견했다 .
sup {
font-size: 0.8em;
line-height: 0;
position: relative;
vertical-align: baseline;
top: -0.5em;
}<sup>태그가 두 줄 사이의 간격에 영향을 미치는 이유 는 여러 가지 요소와 관련이 있습니다. 요소는 다음과 같습니다. 줄 높이, 일반 글꼴과 관련된 위 첨자 크기, 위 첨자의 줄 높이 및 마지막으로 위 첨자의 맨 아래가 무엇인지 ... 설정 한 경우 ... 줄 높이 일반 텍스트의 "터널 밴드"(즉, 내가 부르는 것)가 135 % 인 다음 일반 텍스트 (100 %)는 35 % 더 흰색으로 채워집니다. 단락의 경우 다음과 같습니다.
p
{
line-height: 135%;
}그런 다음 위첨자를 흰색으로 채우지 않으면 ... (예 : 줄 높이를 0으로 유지) 위첨자는 자체 텍스트의 너비 만 갖습니다. 예를 들어 70 %) 일반 텍스트 (텍스트 중간)의 중간에 정렬하면 문제를 제거하고 위 첨자처럼 보이는 위 첨자를 얻을 수 있습니다. 여기있어:
sup
{
font-size: 70%;
vertical-align: text-middle;
line-height: 0;
}이 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>.이 솔루션의 장점은 위 또는 아래 줄과의 충돌을 피하기 위해 위첨자와 아래 첨자의 세로 위치를 조정할 수 있다는 것입니다. 위의 줄에서 0.2em요구 사항에 맞게 늘리거나 줄이면 됩니다.
모든 줄을 더 크게 만들려면 위첨자가있는 줄과 동일하게 보이 line-height려면 전체 단락에 대해 더 크게 정의하십시오.
<p style='line-height:150%'>또는 어떤 가치든지 당신이 원하는 효과를 제공합니다.
이상하게 보일지 모르지만 요구 사항을 설명하는 방식입니다.
편집 : 하나만 다른 공간보다 더 많은 수직 공간이 필요할 때 모든 선을 동일하게 보이게하려면 려면 단락의 모든 줄 .
내가 말했듯이 이것은 매력적인 해결책이 아닐 수 있습니다. 하위 / 위첨자가있는 텍스트 만 더 작게 만드는 범위로 무언가를 수행 할 수 있습니다. 당신이 원하는 것을 얻을 수 있다고 생각하지 않는 것 외에도 할 수 있습니다. 그러나 다른 사람의 솔루션을보고 싶습니다.
EDIT2 : 덧붙여서, 나는 작은 html 파일을 시도했다.
<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>FF3.0.14와 Konqueror에서 줄의 높이는 모두 같습니다 (다른 브라우저에서는 말할 수 없습니다)