는 CSS에서 설정 : 줄 간격

CSS에서 선 사이의 거리를 설정하는 것은 매우 쉽습니다. 이러한 목적을 위해 특별한 특성이있다. 그러나 물론, 보편적 텍스트에 적용 할 수있는 다른 많은 매개 변수가 있습니다.

더 조정이 완료되지 않은 경우, 당신은 기본값으로 설정됩니다. 원하는 경우 당신은 거리를 변경할 수 있습니다. 값은 백분율 또는 픽셀 중 하나 일 수있다.

행 높이

라인 사이의 CSS 거리를 다음 그림에 의해 설명 될 수있다.

상기 이미지에 대응하는 거리와 파라미터를 나타낸다. 텍스트 공간 글꼴 크기입니다. 텍스트 라인은베이스와 약간 이상에서 시작되지 않습니다. 바닥 요소 (g, Y 등)가 문자 아래 제공된 공간.

블록의 글꼴 크기 사이의 공간이 최고의라고합니다. HTML 및 CSS와 함께이 속성이 표시되지 않지만, 다른 그래픽 및 텍스트 편집기입니다. 예를 들어, 어도비 포토샵한다.

은 "포토샵", 당신은 최고의 지정할 수 있습니다 보여줍니다 위의 그림. 그리고 다음 글꼴 크기 설정을 지정했습니다.

라인 높이를 이용하는 예

CSS에서, 라인 사이의 거리가 %로 설정할 수 있습니다. 예시적인 예는 아래에 주어진다.

사이트의 사용자의 작은 값의 경우 읽기 불편할 수 있습니다.

거리가 변화하고, 폰트의 크기 일 수있다. 기본 매개 변수의 차이는 숫자에 크게 다를 경우, 차이는 증가 선두에 의해 보상된다.

디자인의 미묘한

라인 사이의 CSS 거리가 더 다양한 들여 쓰기를 사용자 정의 할 수 있습니다. 그림의 예를 생각해 보자.

이 경우 "요소"에서 텍스트가 될 것입니다. 패딩 - 객체의 들여 쓰기 - 패딩 여백은 객체 내부합니다. 국경 -이 프레임. 픽셀은 0 일 수 있으며 (100) 일 수있다.

다음 이미지는 즉시 모든 마진 프레임과 텍스트 행의 높이를 나타낸다.

모든 한 줄에있는 작은 텍스트, 또는 별도의 단락의 각 행이있는 경우, 거리가 들여 쓰기 단락 사이에 조정할 수 있습니다. 즉 영향을주지 않습니다 하나 개의 셀에 선 사이 maring 및 패딩입니다. 그들은 단지 객체의 가장자리에서 들여 쓰기를 만들 수 있습니다. 객체 -이 전체 단락을, 대신에 라인. 혼동하지 않는 것이 중요합니다.

경우에 동일한 개체에 위치하는 모든 행의 다수의 폰트가 기본 파라미터를 변경할 것을 권장된다.

CSS의 선 사이의 거리를 증가하는 방법

HTML의 라인 사이의 거리, 당신은 모든 클래스 또는 텍스트의 모든 단락에 등록 할 수 있습니다. P {라인 - 높이 : 당신은 다음과 같이 지정하는 경우 20 픽셀; } - 후 절대적 페이지의 모든 단락 20 개 픽셀 스트링 것이다. 서로 다른 크기의 다른 장소에서 원하는 경우에는 다음과 같이하는 것이 좋습니다.

우리는 스타일을 처방.

.class1 {라인 높이 : 20 픽셀; }

.class2 {라인 높이 : 16px; }

.class3 {라인 높이 : 12 픽셀; }

당신이 작동하는지 확인할 수 있도록 명확하게하기 위해, 우리는 프레임을 추가합니다. 향후이를 제거해야합니다.

다음으로, 우리는 이러한 클래스를 사용합니다. 다음과 같은 결과가된다.

세 번째 경우에, 밴드 텍스트로 몰고 있습니다. 모든 기인한다는 사실을 폰트 크기는 라인의 높이보다 더 크다. 따라서, 그러한 충돌이되지 않았 음을 확인하는 것이 중요하다. 당신이 작은 줄 높이를 수행하는 경우, 각각의 글꼴을 줄일 수 있습니다.

너무 작은 텍스트와 라인 사이의 작은 거리를 수행하지 않는 것이 좋습니다. 사용자의 아무도는 침착하게 모두를 읽을 수 없습니다 것입니다. 그는 빠르게 눈의 피로. 검색 엔진은 텍스트가 사용하기 쉬운 것을 말한다.

또한, 최근 몇 년 동안 모바일 사용자 편의성에 중점이있다. 이 권고는 항상 글꼴 크기가 정상이 아닌 작은되어야한다고 말했다. 특히 강하게은 기준에 영향을 미칩니다. 작은 크기로 사용자는 사이트 탐색 기능을 사용하기 어려울 것이다.

검색 엔진에서 "구글은"분석에 도움이되는 특별한 도구입니다. 그것은 웹 마스터를위한 매우 편리합니다.

여기 될 수있는 결과의 일예이다.

이러한 기준은 검색 결과에 영향을 미칠 수 있기 때문에이 팁을 사용하는 것이 좋습니다.