Tab spacing in text using CSS

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • E11esar
    New Member
    • Nov 2008
    • 132
    #1

    Tab spacing in text using CSS

    Hi there.

    I'm new to CSS and I am wondering how I can format text in a way such as the following:

    Bold Text [ ]This is a sample line of text that would be tab-spaced
    [ ]after the bold text on the left.


    Hence I want to apply a tab (or margin) on the same line as the bold string..? This not showing above as I can't get the tab effect to work when posting on here, but in the example above, the two [ ] boxes would line up vertically if the tab was working. Hence blocking the standard text away from the bold text. Hopefully that makes sense..?

    Any help will be much appreciated.

    Thank you.

    M :o)
    Tags: None
    • Dormilich
      Recognized Expert Expert
      • Aug 2008
      • 8694
      #2
      I'd probably float the bold text, since you never know the actual width of a tab (may be dependent on user setting)

        Comment

        • drhowarddrfine
          Recognized Expert Expert
          • Sep 2006
          • 7434
          #3
          Code:
          <!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
span{margin-right:1em;font-weight:bold}
</style>
</head>
<body>
<p><span>Once</span> upon a time</p>
</body>
</html>

            Comment

            • David Laakso
              Recognized Expert Contributor
              • Aug 2008
              • 397
              #4
              Need more information on the need and use intended. If your running blocks of text then this is one simple method:
              The best Studio in the world – Chelsea Creek Studio
              http://chelseacreekstudio.com/ca/cssd/indent.html

              If you're running blocks of text, and are of an accessibility bent, and need it to make sense in a Lynx viewer, the solution could become a little more difficult...

                Comment

                Previous template Next
                Working...