CSS에서 한 범위 내에서 모든 브라우저 호환 내어쓰기 스타일을 만드는 방법

Question

내가 찾은 유일한 것은 다음과 같습니다.

.hang {
    text-indent: -3em;
    margin-left: 3em;
} 

이것이 작동하는 유일한 방법은 단락에 텍스트를 넣는 것인데, 이로 인해 끔찍하게 보기 흉한 추가 줄이 발생합니다.차라리 그냥 한 곳에 두는 게 낫겠어 <span class="hang"></span> 종류의 것.

나는 또한 단일 수준의 매달기보다 더 들여쓰기할 수 있는 방법을 찾고 있습니다.단락을 사용하여 들여쓰기를 쌓는 것이 작동하지 않습니다.

Answer 1

<span> 인라인 요소입니다.용어 내어 쓰기 단락(일반적으로 블록 요소를 의미)에 대해 이야기하지 않는 한 의미가 없습니다.물론 여백을 변경할 수도 있습니다. <p> 또는 <div> 또는 단락 사이의 추가 수직 공간을 제거하기 위한 다른 블록 요소입니다.

당신은 다음과 같은 것을 원할 수도 있습니다 display: run-in, 여기서 태그는 컨텍스트에 따라 블록 또는 인라인이 됩니다.안타깝게도 이건 아직 브라우저에서 보편적으로 지원되지 않음.

Answer 2

불쾌한 범위를 제외하고 이를 수행할 수 있는 멋진 방법을 찾았습니다.

p {
  padding-left: 20px; 
} 

p:first-letter {
  margin-left: -20px;
}

깔끔하고 간단해요 :D

p 블록에서 개행 문자가 귀찮다면 다음을 추가할 수 있습니다.

p {
  margin-top: 0px;
  margin-bottom: 0px;
}

JSFiddle 예

Answer 3

ysth의 답변은 논쟁의 여지가 있는 한 가지 예외를 제외하면 가장 좋습니다.측정 단위는 글꼴 크기와 일치해야 합니다.

p {
  text-indent: -2en; 
  padding-left: 2en;
}

"3"도 적절하게 잘 작동합니다."em"은 알파벳 세트의 평균 문자보다 넓으므로 권장되지 않습니다."px"는 글꼴 크기가 다른 텍스트 블록을 정렬하려는 경우에만 사용해야 합니다.