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

您可以考虑将 实体添加到html。

Answer 2

我能想到的一些方法就是这个小提琴：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来模仿伪`：之后（我在我的小提琴中留下了一个空格，但我认为没必要）。是的，这是额外的代码和等等等等等等。但是，如果您被迫支持旧浏览器的约束和他们不支持的方法，那么剩下的选项就不多了！ ;）

或

我在你的一条评论中看到你对width有约束。您的问题将通过使用CSS属性 box-sizing （具有适当的供应商前缀）来解决，其中填充和边框可以考虑整个宽度，而不再添加：

* { box-sizing: border-box }

但只有IE8 +支持。这是没有doctype的IE7 -...的默认行为。 讽刺的是哦！
但一切都没有丢失，存在一个polyfill： boxsizing.htc

Answer 3

两个画布之间的

It's the whitespace（在本例中为换行符）

或者，您可以保留空白，并在CSS中添加float：left to canvas。如果你

clear your floats.

Answer 4

使用填充：

h1 {
    padding: 0 15px;
}

文本间距没有填充/边距

4 个答案: