css - パディング/マージンなしのテキスト後の間隔

Question

段落内のテキストの後にスペースを追加する方法を探しています。

HTML:

<h1>abc</h1>

CSS:

h1 {
    float: left;
    background: red;
    color: white;
    text-indent: 15px;
}

h1:after {
    content: '';
    margin-left: 15px;
}

しかし、最新のブラウザでのみ作業した後ですか？古いブラウザのパディングとマージンなしでテキストの後にスペースを追加する方法は?

実際のデモ: http://jsfiddle.net/YS2MQ/1/

Answer 1

私が考えることができるいくつかの方法はこのフィドルにあります：http：//jsfiddle.net/YS2MQ/3/そして私はこの答えの最後に完全に異なる回避策を追加しました。

HTML：

<h1 class="ie8plus">abc</h1>

<h1 class="border">abc</h1>

<h1 class="cc">abc<!--[if lte IE 7]> <span>I'm IE7-, let me die please</span><![endif]--><!--[if gt IE 8]><!--> not IE7- here<!--<![endif]--></h1>

<h1 class="textindent"><span>abc</span></h1>

<h1>.after<span class="after"> </span></h1>

CSS：

body {
    margin: 10px;
}

h1 {
    float: left;
    clear: left;
    margin-bottom: 5px;
    background: red;
    color: white;
    text-indent: 15px;
}

.ie8plus:after {
    content: '';
    margin-left: 15px;
}

.border {
    border-right: 20px solid blue; /* you want red obviously. 'transparent' won't work in IE7- so you must have a solid background under h1 */
}
.textindent {
    text-indent: 35px; /* already 15px and we add 20px */
}
.textindent span {
    position: relative;
    left: -20px;
}
.cc span { /* HTML conditional content only interpreted by IE7-. Messy on so many levels... Let's keep the use of conditional comments to conditional stylesheets and conditional classes! */
    background-color: yellow;
    color: black;
}
h1 .after {
    display: inline; zoom: 1; /* that's inline-block for IE7-... and inline isn't required as span is already inline */
    width: 20px;
    height: 1px;
    vertical-align: middle;
    background-color: darkred;
}

言葉で：

• 右の境界線を追加できます、
• 条件付きコメントを悪用して、IE7-に他のブラウザでは表示されないHTMLコンテンツを表示させることができます（注意：ページごとに複数回使用すると管理できなくなります）、
• テキストをに囲み、相対的な位置付けでspan遊ぶことができます。text-indent
• 空span.afterを追加して、疑似 `：afterを模倣することができます（フィドルにスペースを残しましたが、必要ないと思います）。はい、それは余分なコードと何とか何とか何とかですが、サポートされていない制約とメソッドで古いブラウザをサポートすることを余儀なくされた場合、多くのオプションが残っていません！;）

または：

あなたのコメントの1つに、制約があることがわかりましたwidth。問題は、CSSプロパティのボックスサイジング（適切なベンダープレフィックスを使用）を使用することで解決されます。この場合、パディングと境界線は幅全体を考慮に入れることができ、追加されなくなります。

* { box-sizing: border-box }

ただし、これはIE8+でのみサポートされています。これがIE7のデフォルトの動作です-...doctypeなし。皮肉なことに！
しかし、すべてが失われるわけではありません。polyfillが存在します：boxsizing.htc

Answer 2

 エンティティを html に追加することを検討できます。

Answer 3

これは、2 つのキャンバスの間の空白(この場合は改行) です。

または、空白を保持し、CSS でキャンバスに float: left を追加することもできます。もし、あんたが

フロートをクリアします。

Answer 4

パディングを使用:

h1 {
    padding: 0 15px;
}