반 공백, 공백, 공백 등을위한 & nbsp와 같은 다른 공백 코드가 HTML에 유용합니까?


149

HTML 뉴스 레터에 사용할 수있는 다른 코드가 있는지 궁금합니다.

셀 패딩이나 여백을 사용하지만이 HTML / CSS에 익숙하지 않으며 기본 제목 줄과 그 아래에있는 서브 헤드 모두에 영향을 미치는 변경 사항을 찾을 수 없습니다. 이메일이기 때문에 인라인 마크 업이 아닌 CSS 방식에서 어떤 이메일 클라이언트가 마음에 들지 않는지 모르겠 기 때문에 CSS를 사용하는 것이 주저합니다.

맥락에서 내가 사용하는 템플릿은 Mailchimp snip의 Mute 테마입니다.

    <!-- language: lang-html -->
<table cellspacing="0" cellpadding="0" border="0" align="center" width="626">
    <tbody>
        <tr>
            <td valign="middle" bgcolor="#546781" height="97" background="images/header-bg.jpg" style="vertical-align: middle;">
                <table cellspacing="0" cellpadding="0" border="0" align="center" width="555" height="97">
                    <tbody>
                        <tr>
                            <td valign="middle" width="160" style="vertical-align:middle; text-align: left;">
                                <img width="70" height="70" src="http://dl.dropbox.com/…….png" style="margin:0; margin-top: 4px; display: block;" alt="" />
                            </td>
                            <td valign="middle" style="vertical-align: middle; text-align: left;">
                                <h1 class="title" style="margin:0; padding:0; font-size:30px; font-weight: normal; color: #192c45 !important;">
                                    <singleline label="Title"><span>Title of Report</span></singleline>
                                </h1>
                                <h1 class="title" style="margin:0; padding:0; font-size:15px; font-weight: normal; color: #192c45 !important;">
                                    <singleline label="Title"><span>Small Subhead</span></singleline>
                                </h1>
                            </td>
                            <td width="55" valign="middle" style="vertical-align:middle; text-align: center;">
                                <h2 class="date" style="margin:0; padding:0; font-size:13px; font-weight: normal; color: #192c45 !important; text-transform: uppercase; font-weight: bold; line-height:1;">
                                    <currentmonthname />December
                                </h2>
                                <h2 class="date" style="margin:0; padding:0; font-size:23px; font-weight: normal; color: #192c45 !important; font-weight: bold;">
                                     <currentyear />2011
                                </h2>
                            </td>

                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>

웹 페이지로서의 전체 이메일은 여기에서 볼 수 있습니다

답변:


381

예, 많은 .

다음을 포함하지만 이에 국한되지는 않습니다.

  • 비파괴 공간 : &#160;또는&nbsp;
  • 좁은 휴식 공간 : &#8239;(문자 참조 불가)
  • 공간 : &#8194;또는&ensp;
  • em 공간 : &#8195;또는&emsp;
  • 3 인당 공간 : &#8196;또는&emsp13;
  • 4 인당 공간 : &#8197;또는&emsp14;
  • 6 자당 공백 : &#8198;(문자 참조 없음)
  • 그림 공간 : &#8199;또는&numsp;
  • 문장 부호 공간 : &#8200; 또는&puncsp;
  • 얇은 공간 : &#8201; 또는&thinsp;
  • 헤어 공간 : &#8202; 또는&hairsp;

span{background-color: red;}
<table>
<tr><td>non breaking space:</td><td> <span>&#160;</span> or <span>&nbsp;</span></td></tr>
<tr><td>narrow no-break space:</td><td> <span>&#8239;</span></td></tr>
<tr><td>en space:</td><td> <span>&#8194;</span> or <span>&ensp;</span></td></tr>
<tr><td>em space:</td><td> <span>&#8195;</span> or <span>&emsp;</span></td></tr>
<tr><td>3-per-em space:</td><td> <span>&#8196;</span> or <span>&emsp13;</span></td></tr>
<tr><td>4-per-em space:</td><td> <span>&#8197;</span> or <span>&emsp14;</span></td></tr>
<tr><td>6-per-em space:</td><td> <span>&#8198;</span></td></tr>
<tr><td>figure space:</td><td> <span>&#8199;</span> or <span>&numsp;</span></td></tr>
<tr><td>punctuation space:</td><td> <span>&#8200;</span> or <span>&puncsp;</td></tr>
<tr><td>thin space:</td><td> <span>&#8201;</span> or <span>&thinsp;</span></td></tr>
<tr><td>hair space:</td><td> <span>&#8202;</span> or <span>&hairsp;</span></td></tr>
</table>


3
Firefox는 하나의 공백으로 렌더링하고 끊지 않는 문자를 부과하는 nbsp를 제외하고 글꼴에서 하나의 공백보다 넓은 폭으로 위의 공백을 모두 렌더링합니다. 진짜 수치심. 예를 들어 패딩을 제어하거나 다음과 같은 구문으로 다른 것에 전달할 때 문자 만 수행하는 경우가 있습니다.before:
fyngyrz

2
@fyngyrz Linux의 Firefox 54 이상에서는 더 이상 사실이 아닙니다. 글꼴에 따라 다를 수도 있습니다. Arial 글꼴 패밀리가 사용되는 Stack Overflow에서 이것을 테스트했습니다.
그냥 학생

5
이 공백 유형이 jsfiddle.net/LcLg5u25
Vadim Ovchinnikov

2
공백 $numsp;은 같은 글꼴의 숫자만큼 정확하게 정의되므로 숫자 공간은 숫자를 정렬하는 데 매우 유용합니다.
Rudey

2
Windows의 Firefox는 이제 BTW (v.61)입니다.
MSC

13

다른 공백 문자에 대한 코드가 있으며 이러한 코드는 잘 작동하지만 문자 자체는 레거시 문자입니다. 그것들은 새로운 문서에서 사용하기보다는 기존의 문자 데이터에 존재하기 때문에 문자 세트에 포함되었습니다. 글꼴 및 브라우저 버전의 일부 조합에서는 표시 할 수없는 문자의 일반 글리프가 표시 될 수 있습니다. 자세한 내용 은 유니 코드 공백에 대한페이지를 확인 하십시오 .

따라서 CSS를 사용하는 것이 더 안전하며 고정 너비 공간의 특정 너비뿐만 아니라 원하는 간격을 지정할 수 있습니다. 나에게 보이는 것처럼 h2 요소 주위에 간격을 추가하고 싶다면 해당 요소에 패딩을 설정하십시오 (패딩 값을 변경하십시오 : 이미 가지고있는 0 설정).


감사합니다. 인라인 속성 <h1 class = "title"style = "margin : 0; margin-left : 2px; padding : 0; font-size : 15px; font-weight : normal; 색상 : # 192c45! 중요 ; "> 글꼴 패밀리가 Helvetica Neue 등인데도 가장 안전하다고 생각합니다.
wide_eyed_pupil

그러나 그들이 레거시이고 '기존 문자 데이터에 존재하기 때문에 문자 세트에만 포함된다'는 것은 곧 사라지지 않을 것임을 의미합니다. 나는 당신에게 논쟁이 보이지 않습니다. 나는 '반쪽 공간'을 찾기에 충분할 정도로 '고급'인 사람은 이미 여백이나 패딩이 적절하지 않다고 결정했을 것입니다. 나는에 정착 (&thinsp;4 PACK&thinsp;)내 요구 사항 - 이것에 대한 끔찍한 생각 일 것이다 마진이나 패딩을 사용
Simon_Weaver

1
@Simon_Weaver는 내가 설명했듯이 고정 너비 공백 문자가 안정적으로 작동하지 않습니다. 실제 너비는 글꼴과 무관하지만 글꼴과 무관 한 설정과 달리 글꼴을 독립적으로 사용 <span style="padding: 0 0.1em">4 PACK</span>하지만 값을 자유롭게 설정하고 조정할 수 있습니다.
Jukka K. Korpela 2014

1
비록 오래되었지만 Peter K Sheerin의 "EM과 EN의 문제 (및 다른 그늘진 캐릭터)"( alistapart.com/article/emen )는 여전히이 주제를 읽는 데 유용합니다. 특히, 이것은 지난 14 년 동안 개선되었을 지 모르지만 모든 글꼴이 다양한 공간을 올바르게 렌더링하지는 않습니다.
Dave Land

1
도 있습니다 ZERO WIDTH JOINER fileformat.info/info/unicode/char/200d/index.htmZERO WIDTH NON JOINER내가 더 자주 제로 폭 공간에 비해 사용하는 경향이있다.
Reb. Cabin

9

이것이 당신이 말하는 것이 확실하지 않지만, 이것은 당신이 사용할 수있는 HTML 엔티티의 목록입니다 :

XML 및 HTML 문자 엔터티 참조 목록

'이름'열에서 컨텐츠를 사용하여 당신은 단지 이러한 포장 할 수 &;

&nbsp;, &emsp;


따라서 마크 업 된 텍스트 ( '<p>'및 '</ p>'내에서 '&'는 유니 코드 글리프 이름을 나타냅니다. 맞습니까? ';'는 무엇입니까? 브라우저에서 파싱 되었습니까?
wide_eyed_pupil

HTML 파서는 여전히 공백을 참조의 끝으로 간주하므로 닫는 세미콜론은 선택 사항입니다. 그러나이 사양에서는 세미콜론으로 끝나야합니다 ( w3.org/TR/html5/syntax.html#character-references )
isNaN1247

추신-당신이 대답으로 표시해도 여전히 감사하겠습니다-당신이 이것이 당신의 질문에 대답했다고 생각한다면 :)
isNaN1247

2

이 유니 코드 10 진수 코드를 사용 &#8204;하여 작동했습니다. 자세한 내용은


1
너비가 0이 아닌 조이너 (연결 한)는 공백 문자가 아닙니다. 공간을 차지하지 않으며 단어 구분 기호로 취급되지 않습니다. 이 기능의 유일한 목적은 인접 문자가 합자에 합류하는 것을 방지하는 것입니다. 이는 때때로 라틴 이외의 스크립트에서 유용합니다.
duskwuff -inactive-

1

일반적인 인코딩 된 공백 문자는 어떻습니까?

&#32;
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.