1. ホーム
  2. html

[解決済み] 半角スペース、全角スペース、半角スペース、半角スペース、全角スペース、半角スペースを表す&nbspのような他のホワイトスペースはHTMLで有用ですか?

2022-04-14 09:48:15

質問

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>

メール全体をウェブページとして見ることができます。 こちら

解決方法は?

はい。 たくさん .

含むが、これに限定されない。

  • [ ]ヘアースペース : &#8202;  または &hairsp;
  • [ ] 6パーエムのスペース. &#8198; <サブ (文字参照不可)
  • [ ]狭くて切れ目のないスペース. &#8239; <サブ (文字参照不可)
  • [ ] 細いスペース : &#8201;  または &thinsp;
  • [ ] 4パーエムのスペース : &#8197; または &emsp14;
  • [非破壊空間. &#160; または &nbsp;
  • [句読点スペース : &#8200;  または &puncsp;
  • [ ] 3パーエムのスペース : &#8196; または &emsp13;
  • [ ] en space : &#8194; または &ensp;
  • [ ] 図形スペース : &#8199; または &numsp;
  • [ ] em space : &#8195; または &emsp;

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>