>  기사  >  웹 프론트엔드  >  CSS의 높이와 줄 높이의 차이

CSS의 높이와 줄 높이의 차이

巴扎黑
巴扎黑원래의
2017-06-28 09:59:272531검색

이 글은 CSS에서 height와 line-height의 차이점을 주로 소개하고 있습니다. line-height: Line height는 텍스트 사이의 위쪽과 아래쪽 거리를 설정합니다. Height: Height는 레이어의 높이 등을 정의하는 것입니다. 즉, line-height는 구체적으로 단일 행의 높이를 의미할 수 있습니다. 모든 요소의 높이 텍스트가 확대된 후 가장자리가 겹치나요?


Line-height는 텍스트 높이에 텍스트 위와 아래의 공백 영역을 더한 값으로 직접적으로 이해할 수 있습니다. 단위가 고정되어 있으면 줄 높이가 일정하게 설정되지 않는 것이 가장 좋습니다. 값.

글꼴이 확대되고 요소의 줄 높이가 설정되지 않았거나(상위 요소에서 상속
상위 요소가 고정 값임) 해당 값이 고정 값인 경우 텍스트가 줄 높이를 초과합니다. 범위와 중복.
line-height 속성은 상속되므로 텍스트 부분의 line-height를 글꼴 높이 * 1.5인 1.5로 설정하는 것이 가장 좋습니다. 글꼴 크기에 따라 크기를 조정합니다.

텍스트와 그림이 줄 중앙에 오도록 설정하는 방법은 무엇입니까?

line-height의 기본값은 기준선입니다.
vertical-align
:middle을 사용하여 텍스트와 이미지를 가운데 정렬할 수 있습니다.

어떻게 더 쉽게 읽을 수 있나요?

인라인 텍스트 배경색 #fff, 텍스트 색상 #333; 압박감을 줄이기 위해 텍스트 주위에 빈 줄 높이가 14px이고 나머지는 12px일 수 있습니다. 입력 버튼은 모든 브라우저에서 동일하게 작동합니다.

Firefox의 기본 linde-height 값은 기본적으로 보통으로 설정되어 있으며 명시적으로 지정해야 합니다.
코드는 다음과 같습니다:
button, input[type="button"], input[type="submit"] {
line-height:normal !important;
}
input.button, a.button, 버튼 {
글꼴: 굵은 12px Arial, Helvetica, sans-serif

padding

: 5px 8px

}

위 내용은 CSS의 높이와 줄 높이의 차이의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.