Computer >> 컴퓨터 >  >> 프로그램 작성 >> 프로그램 작성

HTML/CSS에서 단락 텍스트를 들여쓰는 방법

HTML 요소에서 텍스트를 들여쓰기해야 합니까? CSS를 사용하여 단락의 첫 줄을 들여쓸 수 있습니다!

방법은 다음과 같습니다.

텍스트 들여쓰기로 단락의 첫 줄 들여쓰기

다음과 같은 단락에 텍스트가 있다고 가정해 보겠습니다.

<p class="indent">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa sit aperiam deserunt quae excepturi fugit, consequuntur cum corporis illum natus quibusdam quasi ab at. Laboriosam aperiam aut laborum animi soluta eligendi iste doloribus error, ex eius magnam? Aperiam illum nam cupiditate omnis. Repudiandae doloribus voluptatibus, animi quas incidunt eveniet fugiat!
</p>

CSS 속성 text-indent를 사용할 수 있습니다. 특정 길이의 첫 줄 들여쓰기:

p.indent {
    text-indent: 30px;
}

다음은 다음과 같습니다.

HTML/CSS에서 단락 텍스트를 들여쓰는 방법

다른 CSS 길이 속성과 마찬가지로 원하는 단위를 사용할 수 있습니다. 픽셀(px), em, rem, 짝수 백분율(%) 단위가 작동합니다.

백분율과 같은 상대 단위를 사용하면 웹 페이지 너비에 따라 들여쓰기 양이 변경됩니다. 웹페이지가 넓을수록 들여쓰기가 커집니다.

음수 text-indent를 추가할 수도 있습니다. 값을 원하면 첫 번째 줄이 왼쪽으로 튀어나오게 합니다.

p.indent {
    text-indent: -30px;
}

단락에서 음수 들여쓰기는 다음과 같습니다.

HTML/CSS에서 단락 텍스트를 들여쓰는 방법

전체 단락을 오른쪽

첫 번째 줄뿐만 아니라 전체 단락을 이동하려면 margin-left를 사용할 수 있습니다. 재산.

p.shifted {
    margin-left: 30px;
}

다음과 같이 표시됩니다. 첫 번째 단락은 이동하지 않고 두 번째 단락은 다음과 같습니다.

HTML/CSS에서 단락 텍스트를 들여쓰는 방법