나는이있는 경우 <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; }물론 선 높이가 충분하지 않으면 위의 선으로 충돌 할 위험이 있습니다.
답변
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 +와 다른 주요 브라우저에서 이것을 테스트했습니다.
답변
나는 같은 문제가 있었고 주어진 대답 중 하나가 효과가 없었습니다. 그러나 나는 나를 위해 일한 수정 프로그램 으로 git commit 을 발견했다 .
sup {
font-size: 0.8em;
line-height: 0;
position: relative;
vertical-align: baseline;
top: -0.5em;
}답변
쉽게 유지 :
sup { vertical-align: text-top; }[ 개별 서체에 따라 글꼴 크기 ]
답변
sup, sub {
vertical-align: baseline;
position: relative;
top: -0.4em;
}
sub {
top: 0.4em;
}답변
length수직 정렬에 사용하는 것을 선호합니다 . 이렇게하면 요소의 기준선이 부모의 기준선 위에 지정된 길이로 정렬됩니다.
sup {
font-size: .83em;
vertical-align: 0.25em;
line-height: 0;
}답변
<sup>태그가 두 줄 사이의 간격에 영향을 미치는 이유 는 여러 가지 요소와 관련이 있습니다. 요소는 다음과 같습니다. 줄 높이, 일반 글꼴과 관련된 위 첨자 크기, 위 첨자의 줄 높이 및 마지막으로 위 첨자의 맨 아래가 무엇인지 … 설정 한 경우 … 줄 높이 일반 텍스트의 “터널 밴드”(즉, 내가 부르는 것)가 135 % 인 다음 일반 텍스트 (100 %)는 35 % 더 흰색으로 채워집니다. 단락의 경우 다음과 같습니다.
p
{
line-height: 135%;
}그런 다음 위첨자를 흰색으로 채우지 않으면 … (예 : 줄 높이를 0으로 유지) 위첨자는 자체 텍스트의 너비 만 갖습니다. 예를 들어 70 %) 일반 텍스트 (텍스트 중간)의 중간에 정렬하면 문제를 제거하고 위 첨자처럼 보이는 위 첨자를 얻을 수 있습니다. 여기있어:
sup
{
font-size: 70%;
vertical-align: text-middle;
line-height: 0;
}