[css] CSS : 요소의 내용 앞에 공백을 추가하는 방법은 무엇입니까?

다음 코드는 작동하지 않습니다.

p:before { content: " "; }
p:before { content: "&nbsp;"; }

요소의 내용 앞에 공백을 어떻게 추가합니까?

참고 : 의미 론적 사용을 위해 테두리 왼쪽과 여백 왼쪽에 색상을 지정하고 공간을 무색 여백으로 사용해야합니다. 🙂

답변

중단되지 않는 공백의 유니 코드를 사용할 수 있습니다.

p:before { content: "\00a0 "; }

JSfiddle 데모 보기

[@Jason Sperske가 개선 한 스타일]

답변

공백을 삽입하는 것에 방귀하지 마십시오. 우선, 이전 버전의 IE는 당신이 무슨 말을하는지 알지 못할 것입니다. 그 외에도 일반적으로 더 깨끗한 방법이 있습니다.

무색 들여 쓰기의 경우 text-indent속성을 사용합니다 .

p { text-indent: 1em; }

JSFiddle 데모

편집하다:

공간에 색을 입히려면 첫 글자에 두꺼운 왼쪽 테두리를 추가하는 것이 좋습니다. (둘 다 사용하면 들여 쓰기가 문제가 될 수 있기 때문에 “대신”이라고 거의 말하지 않겠습니다. 그러나 들여 쓰기를 위해 테두리에만 의존하는 것이 더럽습니다.) 얼마나 멀리 떨어져 있는지 지정할 수 있습니다. , 색상이 첫 글자의 왼쪽 여백 / 패딩 / 테두리 너비를 사용하는 너비.

p:first-letter { border-left: 1em solid red; }

데모

답변

요소 사이에 공간을 추가하려는 경우 margin-left 또는 padding-left와 같은 간단한 것이 필요할 수 있습니다. 다음은 http://jsfiddle.net/BGHqn/3/의 예입니다.

그러면 단락 요소 왼쪽에 10 픽셀이 추가됩니다.

p {
    margin-left: 10px;
 }

또는 단락 요소 내에 패딩을 원하는 경우

p {
    padding-left: 10px;
}

답변

/* Most Accurate Setting if you only want
   to do this with CSS Pseudo Element */
p:before {
   content: "\00a0";
   padding-right: 5px; /* If you need more space b/w contents */
}