Preventing 'prettifying' tabs from translating to spaces

[Miboptita]

So we have recently changed our browser support policy to IE 8 / 9, Firefox, Chrome & Safari on Windows 7, all of which support \[code\]box-sizing: border-box;\[/code\] in some form or another (some require a prefix, for example \[code\]-moz-\[/code\]). This enables us to create a form with width 45em, using labels of width 21em with 1em margin-right (to create a bit of space between the label and associated input / select) and then set the selects / text inputs to 23em. Textareas are 45em and we use a div with text-align right to right align a button. The form lines up perfectly, with no browser-specific tweaks required!However I got stuck on a problem last night when I started a new project. I used this technique but couldn't get it to work. The inputs were all dropping down to the next line. I finally figured out what the source of the problem was, but can't find a way (that I like) to fix it. This is the markup I am using:\[code\]<div class="input-pair"> <label for="mainBackgroundColor">Background Colour</label> <input type="text" id="mainBackgroundColor" name="mainBackgroundColor" class="text color"></div>\[/code\]It turns out that the carriage return and tabs I am using to make it easier to read are being translated to a space. So the actual total width of the label and input is 21em + 1em + 23em + a space, in other words 45em + a space, but the container is only 45em. I have tried different values for white-space in CSS, with no luck. I really don't want to put the label and input on the same line in the code - it would look horrible and not as easy to read. Does anyone have any idea how to stop this new line, and the tabs, from being replaced with a space?