1

I was using the advice given here: https://stackoverflow.com/a/5174967 to lay out some form elements inline. It suggested using word-spacing: -1em; on the parent element and then resetting the spacing back to normal. I found that I didn't need to reset the word-spacing on the form elements inside the <form> tag. 

  form
  {
     word-spacing: -1em;
  }

  input,
  textarea
  {
    width: 90%;
    display: inline-block;
    vertical-align: middle;
  }

  label span
  {
     display: inline-block; 
     width: 10%;
     vertical-align: middle;
  }
Community
  • 1
  • 1
Jason
  • 296
  • 2
  • 8
  • 1
    word spacing and inline layouts don't really have anything to do with each other, and if they do it seems kind of hacky – keeg Jan 25 '13 at 05:14

1 Answers1

1

No, there are no special rules for word-spacing in forms. You can see this by viewing <form>hello world</form> as styled with your (malformed) style sheet. But word-spacing affects spacing between words only, for some (partly browser-dependent) definition for “word”.

Using negative word spacing to deal with spacing of inline blocks is unreliable trickery, and it is not the accepted answer to the question you refer to.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • That's what I thought, just seemed interesting, since the hack works perfectly on Codepen within ``. – Jason Jan 26 '13 at 15:25
  • Did I fix the 'malformed' style sheet? I was using Sass and forgot to reformat it. If not how would you suggest I present the CSS next time. – Jason Jan 26 '13 at 15:27
  • 1
    @Jason, the `word-spacing` hack is unreliable for several reasons, including the fact that the width of word space depends on font. If it seems to work, consider it as insufficient testing. Regarding CSS presentation, it is best to show actual CSS code (which is what browsers work on), but I think it’s OK to use e.g. Sass as long as you explicitly say it’s Sass code. – Jukka K. Korpela Jan 26 '13 at 17:32