추가 수직 공간 없이 인라인 블록 요소를 적절하게 정당화하는 방법은 무엇입니까?

"text-align: justify;"를 사용하여 인라인 블록 요소의 적절한 텍스트 정렬

여러 토론에서 균등하게 배포하는 문제를 탐구했습니다. "text-align: justify;"를 사용하여 인라인 블록 요소 전체에 텍스트를 표시합니다. 그러나 여전히 남아 있는 문제는 요소 줄 아래에 나타나는 빈 수직 공간입니다.

이 바이올린에서 볼 수 있듯이 제안된 해결 방법은 "line-height: 0;"을 설정하는 것입니다. 상위 요소에. 그러나 이렇게 하면 하위 요소에 대해 이전에 설정된 줄 높이가 희생됩니다.

이 바이올린에 제시된 대체 솔루션은 영향을 주지 않고 이 문제를 해결합니다. line-height:

CSS

.prevNext {
    text-align: justify;
}

.prevNext a {
    display: inline-block;
    position: relative;
    top: 1.2em; /* Your line-height */
}

.prevNext:before{
    content: '';
    display: block;
    width: 100%;
    margin-bottom: -1.2em; /* Your line-height */
}

.prevNext:after {
    content: '';
    display: inline-block;
    width: 100%;
}

설명

":before"의 "display: block" " 아래쪽 여백이 음수인 요소는 텍스트를 한 줄 높이만큼 올려 추가 줄을 제거합니다. 인라인 블록 요소의 "위치: 상대"는 이러한 변위에 대응하지만 추가 줄을 추가하지 않습니다.

여백 하단 및 상단 설정에서 "em"을 사용하면 다음과 같이 설정된 모든 줄 높이를 수용할 수 있습니다. 승수 값. 이렇게 하면 변위가 의도한 줄 높이와 일치하게 됩니다.

미래의 클린 솔루션

잠재적인 미래 솔루션은 웹킷 속성을 사용합니다.

.prevNext {
    text-align: justify;
    -moz-text-align-last: justify;
    -webkit-text-align-last: justify;
    text-align-last: justify; /* IE */
}

이 방법은 Firefox 12.0 및 IE8에서 작동하지만 Webkit 브라우저에서 실험적 기능을 활성화해야 합니다. Webkit 버전 39에서 이 속성은 "-webkit-" 확장자 없이 지원되지만 실험적 기능이 활성화된 경우에만 지원됩니다.

위 내용은 추가 수직 공간 없이 인라인 블록 요소를 적절하게 정당화하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!