>  기사  >  웹 프론트엔드  >  line-height와 height의 차이에 대한 자세한 예

line-height와 height의 차이에 대한 자세한 예

WBOY
WBOY원래의
2017-06-28 11:58:112854검색

line-height: line height는 텍스트 사이의 위쪽과 아래쪽 거리를 설정합니다.
height: height는 레이어 등의 높이를 정의합니다.

즉, line-height는 구체적으로 한 줄의 높이를 나타내고 높이를 나타냅니다. 모든 요소의 높이가 될 수 있습니다.

텍스트를 확대한 후 가장자리가 겹치나요?

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

글꼴이 확대되고 요소의 줄 높이가 설정되지 않았거나(상위 요소에서 상속되고 상위 요소가 고정 값임) 해당 값이 고정 값인 경우 텍스트가 줄 높이 범위를 초과하고 중복.

line-height 속성은 상속되므로 텍스트 부분의 line-height를 글꼴 높이 * 1.5인 1.5로 설정하는 것이 가장 좋습니다. 글꼴 크기에 따라 크기를 조정합니다.

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

line-height는 기준선으로 기본 설정됩니다. 수직 정렬:중간을 사용하여 텍스트와 이미지를 가운데 정렬할 수 있습니다.

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

인라인 텍스트 배경색 #fff, 텍스트 색상 #333; 압박감을 줄이기 위해 텍스트 줄 높이 1.25-1.5에 공간이 있습니다. 주요 텍스트 크기는 14px이고 다른 하나는 12px일 수 있습니다.

입력 버튼은 모든 브라우저에서 동일하게 작동합니다.

Firefox의 기본 linde-height 값은 기본적으로 보통으로 설정되어 있으며 명시적으로 지정해야 합니다.

button, input[type="button"], input[type="submit"] { 
line-height:normal !important; 
} 
input.button, a.button, button { 
font: bold 12px Arial, Helvetica, sans-serif; 
padding: 5px 8px; 
overflow:visible; 
}

위 내용은 line-height와 height의 차이에 대한 자세한 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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