문자간, 줄 간격 CSS. 단어 사이의 거리. CSS 코드 줄 사이의 거리를 변경하면 텍스트의 서식을 아름답고 읽기 쉽게 지정할 수 있습니다.

30.08.2019

재산 선 높이텍스트 줄 사이의 간격(줄 간격)을 설정합니다. 이 속성은 보이는 것처럼 텍스트 줄 사이의 간격을 설정하지 않습니다. 텍스트 줄 높이. 즉, 줄 사이의 실제 간격은 다음과 같이 계산됩니다. 선 높이 - 글꼴 크기= 텍스트 줄 사이의 거리. 혹은 그 반대로도 선 높이 = 글꼴 크기+ 텍스트 줄 사이의 거리.

재산 선 높이때로는 텍스트 높이를 중앙에 두기 위해 비표준 방식으로 사용되기도 합니다.

통사론

선택기( 줄 높이: CSS 단위 | 퍼센트 | 승수 | 일반 | 상속; )

가치

기본적으로 브라우저는 줄 간격을 자동으로 선택합니다( 정상).

예

선 높이 - 글꼴 크기= 35px - 13px = 21px:

P(글꼴 크기: 13px; 줄 높이: 35px; )

코드 실행 결과:

예

격차를 줄여보자 21px - 13px = 7px:

P(글꼴 크기: 13px; 줄 높이: 21px; )

코드 실행 결과:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sedtincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus Sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla Massa eros ut dui.

예

이 예에서 텍스트 줄 사이의 거리는 다음과 같습니다. 선 높이 - 글꼴 크기 = 13px - 13px = 0px- 선이 거의 서로 달라붙을 것입니다(윗줄 문자의 꼬리가 아래쪽 문자의 꼬리에 닿습니다):

P(글꼴 크기: 13px; 줄 높이: 13px; )

코드 실행 결과:

예

이 예에서는 값 선 높이- 글꼴 크기에 1.5를 곱합니다. 따라서 선 높이동등할 것이다 글꼴 크기 * 1.5 = 13px * 1.5 = 20px. 그리고 줄 사이의 실제 공간은 선 높이 - 글꼴 크기 = 20px - 13px = 7px:

P(글꼴 크기: 13px; 줄 높이: 1.5; )

코드 실행 결과:

예

승수를 늘려 보겠습니다.

P(글꼴 크기: 13px; 줄 높이: 2.5; )

코드 실행 결과:

예

만약 당신이 선 높이더 적은 글꼴 크기, 그러면 일반적으로 선이 서로 겹칩니다.

P(글꼴 크기: 13px; 줄 높이: 9px; )

코드를 실행한 결과입니다.

블록 요소의 경우 최소 텍스트 줄 높이를 정의합니다. 인라인 인라인 요소(예: ) line-height 속성은 효과가 없습니다. 다른 인라인 요소의 경우 line-height는 블록의 줄 높이를 계산하는 데 사용되는 높이를 지정합니다.

간략한 정보

명칭

	설명	예
<тип>	값의 유형을 나타냅니다.	<размер>
A && B	값은 지정된 순서대로 출력되어야 합니다.	<размер> && <цвет>
A \| 비	제안된 값(A 또는 B) 중에서 하나의 값만 선택해야 함을 나타냅니다.	정상 \| 작은 모자들
\|\| 비	각 값은 독립적으로 사용하거나 순서에 관계없이 다른 값과 함께 사용할 수 있습니다.	너비 \|\| 세다
	그룹 값.	[ 자르기 \|\| 십자가]
*	0회 이상 반복합니다.	[,<время>]*
+	한 번 이상 반복합니다.	<число>+
?	지정된 유형, 단어 또는 그룹은 선택 사항입니다.	삽입?
(A, B)	A회 이상, B회 이하로 반복하세요.	<радиус>{1,4}
#	쉼표로 구분하여 한 번 이상 반복합니다.	<время>#

가치

0보다 큰 숫자는 현재 텍스트의 글꼴 크기에 대한 승수로 처리됩니다. 예를 들어, 값 1.5는 1.5줄 간격을 설정합니다. CSS에서 허용되는 모든 길이 단위는 픽셀(px), 인치(in), 포인트(pt) 등의 값으로도 허용됩니다. 백분율 표기법을 사용할 수 있으며, 이 경우 글꼴 높이는 100으로 간주됩니다. %.

일반 선 사이의 거리가 자동으로 계산됩니다.

모래 상자

곰돌이 푸는 항상 약간의 다과를 싫어하지 않았습니다. 특히 아침 11시에 아침 식사가 오랫동안 끝났고 점심 식사가 아직 시작되지 않았기 때문입니다. 그리고 물론 그는 토끼가 컵과 접시를 꺼내는 것을 보고 몹시 기뻤습니다.

div (줄 높이: 0.5; )

예

선 높이

일반 가정: 대수학 또는 함수의 최대값과 최소값?

명백한 경우를 제외하고 엡실론 이웃은 무한 영역에 대한 복소 적분을 지원합니다.

이 예의 결과는 그림 1에 나와 있습니다. 1.

쌀. 1. line-height 속성 적용

객체 모델

객체.style.line높이

메모

버전 7.0 이전의 Internet Explorer에서는 이미지 및 양식 요소의 줄 높이를 올바르게 계산하지 않습니다.

사양

각 사양은 여러 단계의 승인을 거칩니다.

권장 사항 - 이 사양은 W3C에서 승인되었으며 표준으로 권장됩니다.
후보자 추천 ( 가능한 추천) - 표준을 담당하는 그룹은 목표 달성에 만족하지만 표준을 구현하려면 개발 커뮤니티의 도움이 필요합니다.
제안된 권장사항 제안된 권장 사항) - 이 단계에서 문서는 최종 승인을 위해 W3C 자문위원회에 제출됩니다.
작업 초안 - 커뮤니티 검토를 위해 논의되고 수정된 초안의 보다 성숙한 버전입니다.
편집자 초안( 편집 초안) - 프로젝트 편집자가 변경한 후의 표준 초안 버전입니다.
초안 ( 초안 사양) - 표준의 첫 번째 초안 버전입니다.

HTML 여백 속성은 여러 요소 사이에 여백이나 간격을 추가하는 데 사용됩니다. padding 속성은 지정된 HTML 요소의 내용과 테두리(프레임) 사이에 공백을 추가하는 데 사용됩니다.

여백과 패딩의 차이는 다음 이미지에서 확인할 수 있습니다.

또한 이 두 속성의 차이점을 더 잘 이해하려면 데모를 확인하세요.

데모 및 코드 보기

세 개의 div 요소가 있습니다. 처음 두 개는 HTML 여백 속성을 사용하고 세 번째는 패딩 속성을 사용합니다. div 요소 사이의 공간은 margin 이고, 세 번째 div 내부의 텍스트와 경계선 사이의 공간은 padding 입니다.

CSS 패딩 및 여백 구문

단일 CSS 여백 속성을 선언하는 데 사용되는 구문은 다음과 같습니다.

이 코드는 위쪽, 아래쪽, 왼쪽, 오른쪽 등 모든 방향의 패딩을 설정합니다. 다른 방향에 대해 패딩을 설정해야 하는 경우 다음 약식 선언을 사용하여 이를 수행할 수 있습니다.

여백: 10px 20px 50px 100px;

10px — 상단 패딩;
20px - 오른쪽 패딩;
30px — 하단 패딩;
40px - 왼쪽 패딩.

왼쪽 여백 HTML과 기타 방향을 별도로 설정할 수도 있습니다.

참고: 들여쓰기 px, pts, cm 등을 정의하는 데 사용할 수 있습니다.

CSS 패딩 속성 구문

패딩 속성은 단일/약식 선언을 사용하거나 각 방향에 대해 별도의 선언을 사용하여 설정할 수 있습니다.

하나의 의미를 갖는 단일 선언:

단일 광고로 각 방향에 대해 다음을 수행합니다.

패딩: 10px 20px 50px 100px;

4개의 값을 지정하는 경우 해당 순서는 HTML CSS 여백 속성과 동일합니다.

각 방향에 대해 개별적으로:

패딩 상단: 10px; 오른쪽 패딩: 20px; 패딩 하단: 30px; 왼쪽 패딩: 40px;

HTML 목록에서 여백 및 들여쓰기 설정의 예

소개 부분에서는 div 요소에 사용되는 여백 및 패딩 속성을 보여주었습니다. 이 데모에서는 링크인 메뉴 항목을 사용하여 목록을 만들었습니다. 목록은 div 요소 안에 배치됩니다. 여기에는 하이퍼링크 형태의 메뉴 항목이 포함되어 있습니다.

목록은 다른 CSS 속성으로 정의되지만 HTML 여백 및 패딩 속성을 사용하지 않으면 다음과 같습니다.

데모 및 코드 보기

내부 링크에 10px 여백을 추가하여

우리는 다음과 같은 뷰를 얻게 될 것입니다:

온라인 데모 및 코드 보기

요소 내의 링크에 대한 전체 클래스

패딩: 10px; 여백: 2px; 텍스트 장식: 없음; 색상: #fff; 배경색: #DA8119; 표시:블록;

HTML 테이블의 예를 사용한 필드 데모

다음은 HTML 테이블에서 padding 속성을 사용하는 예입니다. 여러 행이 포함된 테이블을 만들었습니다.

테이블은 다양한 CSS 속성을 사용하여 스타일이 지정됩니다. 먼저 패딩 속성이 적용되지 않은 테이블의 모습을 살펴보세요.

데모 및 코드 보기

필드를 추가하면 다음과 같은 테이블이 생성됩니다.

데모 및 코드 보기

다음은 에 사용되는 스타일에 대한 코드입니다. 전체 코드는 위 링크를 따라가시면 보실 수 있습니다.

패딩: 20px; 테두리: 점선 1px #DF7000; 배경: #D0E8AC; 색상: #000;

양식 요소에 여백과 패딩을 사용하는 예

HTML 여백 패딩 속성은 텍스트 필드, 버튼 등의 양식 요소에도 적용할 수 있습니다.

패딩 속성은 텍스트 상자에 적용될 때 텍스트 상자 내부의 커서와 테두리 사이의 공간을 지정합니다. 여백은 다양한 텍스트 필드나 기타 양식 요소 사이에 패딩을 추가합니다.

더 명확하게 하기 위해 양식을 만들고 여백 및 패딩 속성을 사용하는 필드와 사용하지 않는 필드 간의 차이점을 보여 드리겠습니다. 여백 및 패딩 속성을 적용하지 않은 양식의 초기 모양:

텍스트 상자 클래스와 btn 버튼 클래스에 필드를 추가하면 다음과 같은 양식이 생성됩니다.

텍스트 필드의 여백:

버튼 필드:

패딩: 9px 15px;

데모 및 코드 보기

텍스트 필드 사이의 여백을 늘리거나 줄이려면 HTML CSS 여백 속성을 사용하세요. 이 데모에서는 필드 사이의 거리를 줄이기 위해 음수 값을 사용했습니다.

양식 필드는 다음과 같습니다.

데모 및 코드 보기

HTML 여백에 음수 값을 사용한 후 텍스트 필드 사이의 거리가 3픽셀만큼 감소했습니다.

padding 속성을 사용하여 텍스트 필드 내부의 커서와 다른 속성에서 설정한 테두리선 사이의 거리를 늘렸습니다. 이제 현장이 훨씬 좋아 보입니다.

버튼의 경우 구하다” 또한 패딩 속성을 적용했습니다.

패딩: 9px 15px;

텍스트를 모든 방향으로 정렬하는 데 사용됩니다.

기사 번역 " CSS 패딩 및 여백 – 4가지 HTML 요소로 설명» 친절한 프로젝트 팀이 준비했습니다.

HTML 문서의 경우 태그는 콘텐츠 표시 방법을 나타내는 것보다 콘텐츠를 마크업하는 데 더 많이 사용됩니다. 스타일을 사용하면 프레젠테이션을 더 효과적으로 제어할 수 있습니다. 이 기사에서는 HTML의 단락 서식과 관련된 스타일을 살펴보겠습니다.

꼬리표

HTML에서는 단락을 지정할 수 있으며 align 속성은 단락을 왼쪽, 오른쪽, 가운데 또는 양쪽 맞춤으로 정렬합니다. 그 외에도 전역 스타일 속성을 사용합니다.

단락 정렬

다음 값과 함께 align 속성을 사용하여 단락을 정렬할 수 있습니다.

텍스트 정렬: 왼쪽|오른쪽|중앙|정렬|초기|상속;

다음 코드를 .html 파일에 복사하세요.

스타일 속성을 사용한 단락 정렬

이 단락은 가운데 정렬되었습니다.

이 단락은 오른쪽 정렬됨

이 단락은 브라우저 창에 양쪽 정렬되어 표시됩니다. 양쪽 정렬된 단락은 추가 공백을 추가하여 오른쪽과 왼쪽으로 정렬됩니다. 양쪽 정렬된 단락의 가장자리가 왼쪽 및 오른쪽 정렬된 단락의 가장자리와 일치하는 것을 볼 수 있습니다. 왼쪽 정렬된 단락에서는 왼쪽 가장자리가 직선이고, 오른쪽 정렬된 단락에서는 왼쪽 가장자리가 직선입니다. 이 단락의 양쪽 가장자리가 어떻게 직선인지 보십니까? 이는 text-align:justify 스타일을 통해 달성됩니다.

브라우저 창에서 단락의 HTML 코드는 다음과 같습니다.

줄 간격

style=line-height 를 사용하여 단락 줄 간격을 제어할 수 있습니다. 다음 값과 함께 스타일 속성을 사용합니다.

줄 높이: 일반|숫자|길이|초기|상속;

다음은 줄 간격이 다른 단락을 표시하는 HTML 코드의 예입니다.

스타일 속성을 사용하여 줄 간격 설정

이 단락에서는 스타일 속성에 두 가지 값을 사용합니다. 첫 번째 line-height:1.5는 단락의 1.5줄 간격을 지정하고, 두 번째 값 text-align:justify는 단락 텍스트가 너비에 걸쳐 퍼지도록 지정합니다.

이 단락은 이중 간격으로 정렬되어 있습니다. line-height:2는 이중 간격을 지정합니다. 스타일 속성은 두 개의 값을 가질 필요는 없습니다. 그러나 두 개의 값을 지정해야 하는 경우 세미콜론으로 구분하여 지정할 수 있습니다.

스타일 속성의 line-height 값을 사용하는 몇 가지 방법은 다음과 같습니다.

: 줄 간격을 13픽셀로 설정합니다.

: 현재 글꼴 크기를 기준으로 단락 사이의 HTML 간격을 200%로 설정합니다.

: 줄 높이를 14픽셀로 설정합니다.

들여쓰기

이해하기 쉽도록 들여쓰기라는 용어를 사용했습니다. 하지만 HTML에서는 개체 주위에 빈 공간을 만들기 위해 간격을 사용합니다. 패딩 값과 함께 스타일 속성을 사용하여 단락을 왼쪽이나 오른쪽으로 들여쓸 수 있습니다.

다음은 왼쪽 및 오른쪽 들여쓰기가 있는 단락의 예입니다.

스타일 속성을 사용하여 단락 들여쓰기

이 단락은 들여쓰기가 되어 있지 않고 단순히 정렬되어 있습니다. 이 단락에 대한 P 요소의 스타일 속성을 살펴보세요.

이 단락에서는 padding-left:30px 스타일을 사용하여 왼쪽 패딩을 30px로 설정했습니다. 이 단락은 text-align:justify 스타일을 사용하여 정렬됩니다. 이미 알고 있듯이 Style 속성에 여러 값을 세미콜론으로 구분하여 사용할 수 있습니다.

그리고 이 문단의 오른쪽 들여쓰기는 30픽셀이지만 왼쪽 들여쓰기는 없습니다. 너비에도 맞춰져 있습니다. 스타일 속성의 'padding-right' 값은 오른쪽 패딩을 지정합니다. 효과가 표시되지 않으면 양쪽 정렬된 HTML 단락이 제대로 표시되도록 브라우저 창의 너비를 줄이십시오.

문단간 들여쓰기(문단 앞 들여쓰기, 문단 뒤 들여쓰기)

HTML이나 CSS에서는 이것이 필요하지 않습니다. 요소의 패딩 스타일을 간단히 지정할 수 있습니다.

Padding-top 및 padding-bottom은 단락 앞과 뒤의 공백을 지정하며, 이는 위쪽이나 아래쪽의 안쪽 여백과 같은 역할을 합니다. 아래 태그 예시를 보세요

첫 번째 HTML 단락의 패딩이 두 번째 문단 앞에 10픽셀, 두 번째 문단 뒤에 50픽셀이 되도록 설정했습니다.

스타일 속성을 사용하여 단락 들여쓰기

이 단락에는 들여쓰기 전후에 지정된 내용이 없습니다. 이것은 정당한 일반 단락입니다. 이미 알고 있듯이 태그 내부에 style=”text-align:justify” 코드를 사용하여 단락을 정렬할 수 있습니다.

이 단락은 너무 큽니다. 또한 단락 앞에는 10픽셀, 단락 뒤에는 50픽셀의 패딩이 있습니다. 태그 안에는 3가지 스타일을 설정했습니다.

들여쓰기 및 기본 정렬이 없는 일반 단락입니다.

기억할 사항

HTML 단락은 align 속성이나 text-align 스타일을 사용하여 정렬할 수 있습니다.
HTML은 화면 크기, 브라우저 창 크기에 따라 다르게 렌더링됩니다.
HTML에 추가 공백이나 빈 줄을 추가해도 출력에는 영향을 미치지 않습니다. 브라우저는 모든 추가 공백을 제거합니다.
태그는 표시할 내용을 정의하고 스타일은 표시 방법을 정의합니다.
스타일은 인라인(태그 내), 내부( 요소를 사용하여 동일한 HTML 파일 내부