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


118

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

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

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

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


5
단순한 여백을 추가하지 않는 이유는 무엇입니까?
Cam

5
여백 / 패딩이 전체 블록에 영향을 미치기 때문일 수 있습니다. text-indent가 더 나은 선택이 될 것입니다
nice ass

의미 론적 사용을 위해 border-left와 margin-left를 채색해야합니다. :) 여러 개 element:before { content:"[a kind of space]"; background: mycolor;}를 추가 할 수도 있습니다 . 나는 모든 방법으로 공간을 추가하는 방법을 알고 싶었습니다.
Hugolpz

1
@Hugolpz : 기본적으로 p:first-letter { border-left: 1ex solid mycolor; }.
cHao

@carn 여백은 고정되어 있고 공간 너비는 글꼴 크기에 상대적입니다.
사랑하지 않음

답변:


248

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

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

JSfiddle 데모 보기

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


2
효과를 볼 수 있도록 약간의 편집을했습니다. jsfiddle.net/uMFHH/3 (그렇지 않으면 여백처럼 보이지만 여백을 추가하지 않는 이유는 무엇입니까?)
Jason Sperske

왼쪽 테두리와 왼쪽 여백을 채색해야하기 때문에 :)
Hugolpz 2013 년

3
왜 끝에 공간이 "\00a0 "있습니까? 그게 필요합니까 "\00a0"아니면 우리가 할 수 있습니까?
jbyrd

1
@jbyrd : 필요하지 않습니다 ( jsfiddle.net/nhyw6e9q 참조 ). 나는 정상적인 공간이 고려되지 않음을 보여주기 위해 거기에 남겨 두었습니다.
Hugolpz

40

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

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

p { text-indent: 1em; }

JSFiddle 데모

편집하다:

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

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

데모


2
IE <8을 지원하는 경우이 메서드는 작동하지만 이전 / 이후 의사 요소는 작동하지 않습니다.
cimmanon

1
@cimmanon : 네. MDN에 따르면 이것은 IE 3에서도 작동합니다 ( 당시 CSS 있다는 사실조차 몰랐지만 : P).
cHao

이러한 들여 쓰기에는 색상을 지정할 수 없습니다 { text-indent: 1em; }. 그러나 우리는 그런 공간을 채색 할 수 있습니다 :before {content: "\00a0 "; background: #000; }. See Fiddle
Hugolpz

1
@Hugolpz : 텍스트 들여 쓰기? 아니. 다르게 색칠 할 수는 없습니다, AFAIK. 하지만 국경? 확실한. :)
cHao

오, 여러 콘텐츠를 추가 할 수 없습니다 . Fiddle을 참조하세요 . 너무 나쁘다 ...
Hugolpz 2013 년

8

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

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

p {
    margin-left: 10px;
 }

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

p {
    padding-left: 10px;
}

5
/* 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 */
}
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.