Html Archives - Page 79 of 106

[html] 줄 높이에 영향을 미치는 HTML 태그, 어떻게 일관성을 유지합니까?

나는이있는 경우 여러 줄에 태그 무엇 라인 높이의 태그는 다른 라인보다 그 위에 간격보다 큰 라인을 가지고에 첨자와 라인, 선명하게 촬상을 내가 입고 .

설명 편집 : 나는 각각 한 줄에있는 많은을 가지고 있다는 것을 의미하지는 않습니다 . 여러 줄에 줄 바꿈하기에 충분한 내용 의 단일 항목 이 있습니다. 어딘가에 텍스트 (어디서나)이있을 수있다 나 . 이는 위 / 아래에 여분의 간격을 추가하여 해당 행의 행 높이에 영향을줍니다. 더 큰 선 높이를 설정 하면 문제와 아무런 차이가 없습니다. 줄 높이는 증가하지만 여분의 간격은 여전히 남아 있습니다.

일관성을 유지하려면 어떻게해야 합니까?

솔루션은 브라우저 간이어야합니다 (IE 6+, FF, 사파리, 오페라, 크롬)

답변

line-height는 그것을 고치지 만 꽤 크게 만들어야 할 수도 있습니다. 내 설정에서 더 이상 방해하지 않기 전에 선 높이를 약 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;
}

트릭은 의 행 높이를 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;
}

답변

태그가 두 줄 사이의 간격에 영향을 미치는 이유 는 여러 가지 요소와 관련이 있습니다. 요소는 다음과 같습니다. 줄 높이, 일반 글꼴과 관련된 위 첨자 크기, 위 첨자의 줄 높이 및 마지막으로 위 첨자의 맨 아래가 무엇인지 … 설정 한 경우 … 줄 높이 일반 텍스트의 “터널 밴드”(즉, 내가 부르는 것)가 135 % 인 다음 일반 텍스트 (100 %)는 35 % 더 흰색으로 채워집니다. 단락의 경우 다음과 같습니다.

 p
    {
            line-height: 135%;
    }

그런 다음 위첨자를 흰색으로 채우지 않으면 … (예 : 줄 높이를 0으로 유지) 위첨자는 자체 텍스트의 너비 만 갖습니다. 예를 들어 70 %) 일반 텍스트 (텍스트 중간)의 중간에 정렬하면 문제를 제거하고 위 첨자처럼 보이는 위 첨자를 얻을 수 있습니다. 여기있어:

sup
{
    font-size: 70%;
    vertical-align: text-middle;
    line-height: 0;
}