1

I looking-for how to add spacing after text in paragraph.

HTML:

<h1>abc</h1>

CSS:

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

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

But :after work only in modern browser? How to add space after text without padding and margin for older browser?

Working demo: http://jsfiddle.net/YS2MQ/1/

kicaj
  • 2,633
  • 4
  • 40
  • 62

4 Answers4

0

You could consider adding the &nbsp; entity to the html.

kingdomcreation
  • 639
  • 4
  • 10
0

Use padding: 

h1 {
    padding: 0 15px;
}
jalynn2
  • 5,985
  • 2
  • 14
  • 14
  • 1
    OP wrote "without padding and margin" – FelipeAls Mar 05 '13 at 18:22
  • There seems to be a lot of complication and extra markup being proposed when simple padding would do. OP doesn't explain his/her requirements why simple padding is inadequate. If it is desired to *always* have space before and after the test, then I don't see how width is increasing. If the extra space is only desired under some circumstances, those circumstances are not explained. Usually the simple solution is best. – jalynn2 Mar 05 '13 at 19:51
0

A few methods I can think of are in this fiddle: http://jsfiddle.net/YS2MQ/3/ and I added a completely different workaround at the end of this answer.

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;
}

In words:

  • You can add a right border,
  • you can abuse conditional comments to force IE7- to see HTML content that other browsers won't see (beware: use it more than once per page and it'll be unmanageable),
  • you can enclose text into a span and play with text-indent and relative positioning,
  • you can add an empty span.after to mimick the pseudo `:after (I left a space in my fiddle but I don't think it's necessary). Yes it's extra-code and blah blah blah BUT if you're forced into supporting old browsers with constraints and methods they don't support, well there are not many options left! ;)

Or:

I see in one of your comment that you've a constraint with width. Your problem would be solved with the use of the CSS property box-sizing (with appropriate vendor prefixes) where padding and borders can be taken into account of the whole width, not added anymore:

* { box-sizing: border-box }

but that's only supported by IE8+. That's the default behavior of IE7-... without doctype. Oh the irony!
But all isn't lost, there exists a polyfill: boxsizing.htc

FelipeAls
  • 20,411
  • 7
  • 49
  • 71
0

It's the whitespace(in this case, a line break) between your two canvas

Alternatively, you can keep your whitespace, and add float: left to canvas in your CSS. If you

clear your floats.

Community
  • 1
  • 1